Do fluxo ao flexbox: display: flex

Três coisas com as quais o fluxo normal luta

O curso passado cobriu o fluxo normal: caixas block empilhando e caixas inline fluindo com o texto. Ele faz bem as duas coisas. Mas três pedidos de layout muito comuns não têm resposta limpa no fluxo normal. "Coloque estes três itens numa fileira, bem espaçados." "Centralize esta caixa na horizontal e na vertical." "Faça todo card desta fileira ter a mesma altura." O fluxo normal responde com gambiarras como floats, margens negativas e chute. O flexbox foi criado para fechar essa lacuna.

Ligando: display: flex

Uma declaração troca um container para o layout flexbox:

.row {
  display: flex;
}

<div class="row">
  <div>Um</div>
  <div>Dois</div>
  <div>Três</div>
</div>

Sem nenhum outro CSS, essas três <div>s, normalmente empilhadas uma por linha, viram uma fileira horizontal, cada uma da largura do seu conteúdo. display: flex troca o algoritmo de layout dos filhos diretos do container, das regras de empilhamento do fluxo normal para as regras de fileira e alinhamento do flexbox.

Container e itens: dois papéis diferentes

O flexbox tem dois papéis, e toda propriedade deste curso se aplica a um deles. O elemento com display: flex é o container flex. Os filhos diretos dele, e só eles, são itens flex.

<div class="row">        <!-- container flex -->
  <div>Um</div>           <!-- item flex -->
  <div>Dois</div>         <!-- item flex -->
  <div>
    <p>Aninhado, não é item flex</p>   <!-- fluxo normal ainda se aplica aqui -->
  </div>
</div>

O <p> aninhado, dois níveis abaixo, não é item flex. Ele segue o fluxo normal, como o curso passado ensinou. O flexbox só alcança os filhos imediatos do container.

Dois eixos que valem nomear

O flexbox organiza os itens ao longo de um eixo principal, e a direção perpendicular é o eixo transversal. Por padrão o eixo principal vai da esquerda para a direita e o transversal de cima para baixo, como a fileira do primeiro exemplo.

flowchart LR
  subgraph C["container flex — os itens fluem ao longo do eixo principal (da esquerda para a direita, por padrão)"]
    direction LR
    I1["item"] --- I2["item"] --- I3["item"]
  end

justify-content posiciona os itens no eixo principal, e align-items os posiciona no eixo transversal. Todo valor deste curso pertence a um desses dois.

Transformar a fileira em coluna, mudando a direção do eixo principal, fica para o próximo curso desta série. Aqui os eixos mantêm a orientação padrão para as propriedades de alinhamento terem toda a sua atenção.

Regras do fluxo normal são suspensas para itens flex

Quando um elemento vira item flex, parte do comportamento do fluxo normal deixa de valer para ele. O curso CSS box model observou que margens nunca colapsam entre filhos flex. Isso porque o colapso de margem é uma regra do fluxo normal. Floats também não afetam itens flex. O flexbox é um modo de layout próprio, com regras próprias.

O que este curso cobre

• Aula 1, Do fluxo ao flexbox: ligando display: flex, e o vocabulário de container/item, eixo principal/eixo transversal (você está aqui)
• Aula 2, justify-content: posicionando itens ao longo do eixo principal
• Aula 3, align-items: posicionando itens ao longo do eixo transversal
• Aula 4, Centralizando com flexbox: resolvendo o clássico problema de "centralizar dos dois jeitos" em duas linhas
• Aula 5, align-self: sobrescrevendo o alinhamento no eixo transversal de um item individualmente
• Aula 6, gap: espaçamento limpo entre itens, sem gambiarras de margem
• Aula 7, Juntando tudo: uma navbar e um overlay centralizado, construídos com tudo acima

No final, os três pedidos que abriram esta aula (uma fileira, centralização perfeita, alinhamento sem chute) vão levar poucas declarações cada.