Se você nunca ouviu falar em flexbox no CSS ou ainda tem alguma dúvida fique tranquilo e veja essa guia completo de flexbox até o final pra DOMINAR isso ainda hoje.

Afinal, o que é flexbox?

É uma forma muito útil de construir layouts no CSS em que organizamos os elementos alinhando e distribuíndo espaços sem precisarmos saber as dimensões do ambiente, por isso o termo “flex”.

flexbox

Imagine que nessa imagem acima você poderia organizar os itens de várias maneiras dentro do elemento pai (container). Com simples comandos usando flexbox podemos organizar os elementos na horizontal ou na vertical de várias maneiras diferentes.

Container x Item

Antes de começar a usar flexbox é preciso entender que as propriedades do flexbox podem ser aplicadas no elemento pai (container) e nos itens que estão dentro dele.

As propriedades que usamos no elemento container organizam de forma geral todos os itens de dentro. Já as propriedades que usamos nos itens são para modificar individualmente cada item que recebeu o valor.

1. Propriedades do container

Primeiro de tudo para começar a usar flexbox precisamos informar no elemento container o display: flex, isso vai de fato dizer ao navegador “aqui dentro você deve organizar os elementos de forma flexível”, vai tornar o elemento um flex container e os filhos flex-itens.

Feito isso, todos os elementos filhos (apenas os filhos diretos, não os que tiverem dentro dos filhos) vão começar a funcionar no espaço do elemento container de acordo com as regras do flexbox CSS.

Veja a diferença enorme de um container com display: block e outro com display: flex:

See the Pen display:flex by frontend.com.br (@labfrontend) on CodePen.

Flex-direction: Linha ou coluna?

Essa propriedade define em que direção os itens serão “enfileirados” no que chamamos de eixo principal. Existem baicamente 2 direções que é na horizontal que usamos o valor row (padrão) e na vertical que usamos column.

Porém podemos além de usar o valor row e column, usar row-reverse e column-reverse. Nesses dois casos continua a direção usada (row ou column) porém a ordem dos itens será inversa, começando a renderização do final (da linha ou coluna) até o começo.

Os valores então podem ser:

  • flex-direction: row;
    • Coloca os itens na direção horizontal;
  • flex-direction: column;
    • Itens na vertical;
  • flex-direction: row-reverse;
    • Itens na horizontal começando do fim até o começo;
  • flex-direction: column-reverse;
    • Itens na vertical começando do fim ao começo;

No código abaixo é possível ver os 4 valores em funcionamento:

See the Pen flex-direction by frontend.com.br (@labfrontend) on CodePen.

Flex-wrap: Quebra de linha?

Quando os itens dentro do container chegam ao limite de largura da linha, essa propriedade define se os elementos que não cabem devem continuar na linha de baixo ou se todos elementos devem se apertar pra caber na linha, ultrapassando a largura.

Quando usamos display: flex e não informamos um valor para flex-wrap ele vem como padrão “nowrap”. Esse valor não quebra linha, ficando todos os itens juntos apertados numa mesma linha. Os possíveis valores de flex-wrap são:

  • flex-wrap: nowrap;
    • Todos ficam numa mesma linha;
  • flex-wrap: wrap;
    • Os itens que não cabem devem continuar na linha de baixo;
  • flex-wrap: wrap-reverse;
    • Semelhante ao wrap, porém os itens que não cabem são jogados pra linha de cima;

See the Pen flex-wrap by frontend.com.br (@labfrontend) on CodePen.

Flex-flow: Flex-direction + flex-wrap

Flex-flow é uma propriedade que junta o valor de flex-direction e o valor de flex-wrap num só. O primeiro valor deve ser o de flex-direcion e o segundo do flex-wrap. Ex.:

  • flex-flow: row wrap;

Uma observação: Essa propriedade não é muito utilizada pois quando usamos “flex-wrap: wrap” para quebrar linha estamos tratando de itens em linha (row) que já vem como padrão no flex-direction. E quando usamos “flex-direction: column” já sabemos que os itens vão ficar um abaixo do outro, portanto não tem necessidade de declarar flex-wrap, pois os itens já vão ficar um abaixo do outro independente de quebrar linha ou não.

See the Pen flex-flow by frontend.com.br (@labfrontend) on CodePen.

Justify-content

Essa propriedade vai definir o alinhamento dos itens na direção que você definiu em flex-direction. Se você definiu por exemplo que os itens devem ficar em linha(row) esse propriedade vai alinhas os itens na horinzontal, podendo por exemplo colocar os itens no centro do container, no lado esquerdo ou direito.

Essa propriedade só funciona se os itens não ocuparem todo o espaço, pois justify-content vai alinhar os elementos distribuindo os espaços vazios. Os valores possíveis:

  • justify-content: flex-start;
    • Itens juntos no inicio, com espaço depois deles;
  • justify-content: flex-end;
    • Itens juntos no final, com o espaço antes deles;
  • justify-content: center;
    • Itens juntos no centro, com espaços antes e depois deles;
  • justify-content: space-between;
    • Os espaços ficam entre os itens, os afastando totalmente um do outro;
  • justify-content: space-around;
    • Espaço entre eles 2x maior que espaço antes e depois deles;
  • justify-content: space-evenly;
    • Espaço distribuído igualmente entre eles;

See the Pen justify-content by frontend.com.br (@labfrontend) on CodePen.

Align-items

Essa propriedade tem muito ligação com o justify-content, porque: Existem 2 eixos quando usamos flexbox, o eixo principal determinado pelo flex-direction e o eixo transversal que sempre será o contrário do eixo principal.

Então se o flex-direction tiver como “row” ou seja, os itens tiverem na horizontal, significa que usamos para alinhar horizontalmente o justify-content e usamos o align-items para alinhar verticalmente.

Se o eixo principal (flex-direction) tiver como coluna, o justify-content vai alinhar os itens verticalmente, e o align-items vai alinhas na horizontal.

Parece confuso mas vamos ver na prática:

See the Pen align-items:1 by frontend.com.br (@labfrontend) on CodePen.

Perceba que quando os itens estão na horizontal o align-items alinha na vertical (ao centro) e quando os itens estão em coluna o align-items alinha no centro horizontalmente, semelhante a como vimos no exemplo de “justify-content: center;”.

Os possíveis valores de align-items:

  • align-items: stretch;
    • Valor padrão, estica os items pra preencher todo o container;
  • align-items: flex-start;
    • Itens ficam juntos no início do eixo (varia se for row ou column);
  • align-items: flex-end;
    • Itens juntos no fim do eixo;
  • align-items: center;
    • Itens juntos ao centro. Lembrando que se flex-direction for row, essa é uma incrível forma de alinhar os itens no centro do container verticalmente.
  • align-items: baseline;
    • Alinha os itens de acordo com os textos que estão dentro dos itens, ou seja os textos dos itens ficam alinhados.

See the Pen align-items by frontend.com.br (@labfrontend) on CodePen.

Align-content

Se seus itens tiverem em linhas (row) e usando quebra de linha (wrap) essa propriedade vai alinhas as linhas verticalmente. Os possíveis valores são:

  • align-content: stretch;
    • Padrão, estica as linhas até preencherem todo o espaço vertical do container;
  • align-content: flex-start;
    • Deixa as linhas juntas no início do container;
  • align-content: flex-end;
    • Linha juntas no final do container;
  • align-content: center;
    • Deixa as linhas juntas no centro do container verticalmente;
  • align-content: space-between;
    • Afasta as linhas ao máximo uma da outra verticalmente;
  • align-content: space-around;
    • Cria espaço entre as linhas, porém cria espaço também do topo e do fundo do container;

See the Pen align-content by frontend.com.br (@labfrontend) on CodePen.

2. Propriedades dos itens

Até agora vimos as propriedades que usamos no container para organizar os itens. Mas existem também as propriedades que aplicamos direto nos itens para mudá-los individualmente dentro do container.

Você pode inclusive tornar um item container, dessa forma será um container dentro de outro, então tudo que estiver dentro desse item que recebeu display: flex ficará organizado com flexbox, sendo itens também.

Order: Alterando a ordem de um item

Essa propriedade altera a ordem natural de apresentação dos itens de um container. Quando temos por exemplo 3 itens, todos têm o valor padrão 0 de order, sendo assim são mostrados por ordem de escrita do HTML, quem for escrito primeiro será mostrado primeiro.

Agora Imagine que você deseja que o 2º item seja mostrado primeiro, o 3º item seja mostrado em segundo e o primeiro item por último, tudo isso sem modificar a ordem dos elementos do HTML :

See the Pen order-flexitem by frontend.com.br (@labfrontend) on CodePen.

A lógica de “order” é simples: O menor valor é mostrado primeiro, e assim sucessivamente como podemos ver no CSS acima.

Align-self: O Align-items individual

See the Pen align-self – flexitem by frontend.com.br (@labfrontend) on CodePen.

Nesse exemplo perceba que o align-items estava alinhando todos os itens ao centro (verticalmente) e eu alinhei apenas o item um no início (flex-start) usando a propriedade align-self direto no item 1.

Flex-grow

Essa propriedade determina o quanto um item vai crescer relacionado aos outros. O valor padrão de flex-grow dos itens é 0, isso significa que ocupam apenas o espaço necessário pra conter seu conteúdo. O valor deve ser numérico.

Caso eu queira que 1 dos elementos ocupe todo o espaço que sobra do container eu determino um valor maior que 0, por exemplo 1.

Se eu tiver por exemplo 3 itens, e quiser que 1 deles tenha apenas a sua largura necessária pra seu conteúdo, e os outros 2 ocupem todo o espaço que sobra proporcionalmente, eu posso atribuir aos 2 o valor de flex-grow: 1;

See the Pen flex-grow-flexitem by frontend.com.br (@labfrontend) on CodePen.

Flex-shrink

Inverso do fex-grow, essa propriedade diz o quanto cada item deve encolher quando o espaço do container não puder acomodar todos os itens com seus tamanhos normais. Essa propriedade recebe valor numeral.

Digamos que tenhamos 3 itens na do container. Os 3 itens ocupando toda a largura do container (flex-grow: 1 em todos). Se diminuímos a largura do container a um ponto que não caiba mais os 3 to tamanho normal(tamanho que acomoda seus conteúdos) podemos dizer que um item por exemplo pode diminuir mais que os outros:

See the Pen flex-shrink-flexitem by frontend.com.br (@labfrontend) on CodePen.

Flex-basis

É o tamanho inicial dos itens, antes que o espaço que sobra seja distribuído entre os itens. Pode ser em px, %, em ou qualquer outra unidade de medida. O valor padrão dos itens para flex-basis é auto, sendo assim ele vai ocupar apenas a largura de seus conteúdos.

Se tivessémos 3 itens, 2 com valor auto e um com flex-basis 100px ficaria assim:

See the Pen flex-basis-flexitem by frontend.com.br (@labfrontend) on CodePen.

Flex: Grow + shrink + basis

Essa propriedade unifica todos as 3 propriedades anteriores num comando só. O primeiro valor é referente o flex-grow, o segundo flex-shrink e o terceiro flex-basis. Exemplo:

flex: 1 0 200px;

Nesse exemplo determinados flex-grow: 1, flex-shrink: 0 e flex-basis: 200px. Se eu usasse por exemplo:

flex: 1;

Estaria dizendo que flex-grow: 1, flex-shrink: 1 e flex-basis: 0.

See the Pen GRoGmEE by frontend.com.br (@labfrontend) on CodePen.