Aprenda Flexbox em 10 Minutos – Tutorial de HTML e CSS

Você já se perguntou como designers e desenvolvedores conseguem criar layouts da web que se adaptam perfeitamente a diferentes tamanhos de tela e dispositivos?

A resposta está no uso do Flexbox, uma técnica essencial de CSS que permite criar layouts responsivos de maneira eficaz e flexível.

Portanto, se você deseja aprender a utilizar o Flexbox, este guia passo a passo é o lugar certo para começar.

Continue lendo esse artigo até o final.

Vídeo Aula – Danki Code

Para deixar esse conteúdo mais didático vou deixar a aula do Guilherme Grilo que é o dono da Danki Code, atualmente uma das melhores escolas online de programação.

Quer aprender a criar e programar qualquer tipo de site, sistemas web e até mesmo aplicativos? Clique no botão abaixo e aproveite o desconto exclusivo para o curso Pacote Full Stack Master:

O que é o Flexbox?

O Flexbox, ou Flexible Box Layout, é um modelo de layout em CSS que permite distribuir o espaço disponível em um contêiner e alinhar os elementos de maneira automática.

Ou seja, ele é particularmente útil para criar layouts complexos e flexíveis, tornando o design responsivo uma tarefa mais simples.

Vantagens do Flexbox

Logo abaixo vou deixar algunas vantagens de se utilizar o flexbox:

• Layouts Responsivos: O Flexbox facilita a criação de layouts que se adaptam a diferentes tamanhos de tela, tornando seu site ou aplicativo mais amigável para dispositivos móveis.

• Alinhamento Simples: O Flexbox automatiza o alinhamento de elementos, economizando tempo e esforço em ajustes manuais.

• Ordem Flexível: Você pode reorganizar os elementos visualmente sem modificar a estrutura do HTML.

• Facilidade de Uso: Mesmo para iniciantes, o Flexbox é relativamente fácil de aprender e aplicar.

Passo 1: Estruturando seu HTML

Antes de começar com o Flexbox, você precisa estruturar seu HTML. Crie um contêiner (normalmente uma <div>) que conterá os elementos que deseja posicionar usando Flexbox.

Em seguida, adicione esses elementos dentro do contêiner.

Exemplo:

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

Passo 2: Aplicando o Display Flex

A propriedade fundamental para usar o Flexbox é display: flex. Ela deve ser aplicada ao contêiner que você criou no Passo 1.

Exemplo:

.container {
    display: flex;
}

Agora, os elementos filhos dentro do contêiner se comportarão como itens flexíveis.

Passo 3: Configurando a Direção do Layout

O próximo passo é definir a direção do layout. O Flexbox oferece quatro opções:

• row (padrão): Os itens são dispostos horizontalmente da esquerda para a direita.
• row-reverse: Os itens são dispostos horizontalmente da direita para a esquerda.
• column: Os itens são dispostos verticalmente de cima para baixo.
• column-reverse: Os itens são dispostos verticalmente de baixo para cima.

Exemplo:

.container {
    display: flex;
    flex-direction: row;
}

Passo 4: Ajustando o Alinhamento

Agora que você definiu a direção do layout, pode alinhar os itens horizontalmente e verticalmente. Duas propriedades são essenciais:

• justify-content: Controla o alinhamento horizontal dos itens.
• align-items: Controla o alinhamento vertical dos itens.

Exemplos:

.container {
    display: flex;
    flex-direction: row;
    justify-content: center; /* Alinha horizontalmente no centro */
    align-items: center; /* Alinha verticalmente no centro */
}

Passo 5: Espaçamento Entre Itens

Para adicionar espaçamento entre os itens, você pode usar a propriedade gap. Isso cria um espaço uniforme entre os elementos no contêiner.

Exemplo:

.container {
    display: flex;
    gap: 10px; /* Espaçamento de 10 pixels entre os itens */
}

Passo 6: Ordenando os Itens

O Flexbox permite que você reordene visualmente os itens sem modificar o HTML. A propriedade order define a ordem de exibição dos itens. Itens com valores menores aparecerão primeiro.

Exemplo:

.item:nth-child(1) {
    order: 3; /* Este item aparecerá em terceiro lugar */
}

Conclusão

Em conclusão, dominar o Flexbox é um passo importante para criar layouts responsivos e flexíveis em seus projetos da web.

Com os passos simples apresentados neste guia, você está pronto para começar a explorar as possibilidades do Flexbox e aprimorar suas habilidades de design e desenvolvimento.

À medida que você pratica e experimenta, se tornará um mestre na criação de layouts elegantes e responsivos. O Flexbox é uma ferramenta poderosa que certamente impulsionará suas capacidades de design web

Caso queira aprender tudo que você precisa para se tornar um programador júnior recomendo clicar no botão abaixo e conhecer o Pacote Full-Stack Master da Danki Code (CEO Guilherme Grillo).

INSCREVA-SE AGORA MESMO!

Espero que este artigo tenha sido útil e inspirador para o seu próximo projeto de desenvolvimento web.

Tags: como aprender flexbox | flexbox para iniciante | tutorial flexbox