Se você ainda não sabe o que é Flexbox, recomendo que de uma lida no artigo do site developer Mozilla, onde é explicado de forma mais teórica suas funcionalidades. Em resumo, posso adiantar que o Flexbox é uma especificação do CSS3 que facilita e muito na hora de posicionar elementos de um layout.

Por exemplo nesta imagem abaixo, temos um layout onde foi usado flexbox. Caso contrário, teria que ser aplicado a propriedade float, que causa diversos bugs e por consequência, mais códigos CSS para corrigir.

flexbox layout

Flexbox na prática

Para o melhor entendimento, faremos um layout igual a imagem acima. Embora pareça algo simples, sem o flexbox se torna algo chato de se fazer.

Em primeiro lugar, criaremos uma estrutura html. Assim teremos uma DIV container, com 6 Divs menores dentro. Segue o exemplo abaixo.

Feito isso, iremos começar a estilizar nosso CSS. Mas antes disso, recomendo que faça um reset básico no seu CSS. Segue um modelo básico de reset que será o suficiente para esse layout.

O próximo passo é atacar a DIV container. Através dela, iremos controlar todas outras DIVs menores.

Explicando as 3 propriedades acima.

  • Display flex – Propriedade principal do Flexbox, sem ela nada funciona.
  • Flex-wrap wrap – Aqui estamos dizendo que quando os elementos filhos ocuparem todo espaço, recomece na linha debaixo.
  • Justify-content space-around – Com essa propriedade, colocamos uma margem igual entre os elementos filhos.

Para finalizar, iremos fazer o CSS das divs menores. Porém sem nenhuma novidade, apenas o bom e velho CSS.

Deixando responsivo

Se você ficou impressionado com a facilidade dessa propriedade, espere para ver como é fácil usa-la para criar um site responsivo. Usando o Media Queries, irei definir algumas regras de comportamento para meu site.

Então, nesse nosso caso, ficou assim. Veja o exemplo abaixo.

A única propriedade do flexbox nesse caso é o flex-direction: column. Ou seja, quando o site for acessado por um dispositivo menor ou igual 600px, a propriedade flex-direction será ativada. Em outras palavras, mudará o comportamento das DIVs filho, isso é, as deixará em coluna, uma embaixo da outra.

Em seguida, deixarei todo html e CSS usado para você estudar. Embora neste exemplo eu tenha usado poucas propriedades do flexbox, ficou claro o quão fácil é usa-la. Entretanto, existe outras dezenas de funções para você aprender. Mas por hoje é o suficiente, segue abaixo o código HTML e CSS para você analisar.

CSS

Leia também – Aprenda fazer efeito hover em imagens
Leia também – Aprenda usar a função Calc do CSS
Leia também – Veja como centralizar uma div na vertical

Publicitário por formação e curioso nas áreas de designer gráfico e programação. Atualmente estudo marketing digital, PHP e JavaScript.