Curso de CSS / Flexbox básico: contêineres, itens e eixos

O Flexbox organiza os itens filhos diretos de um contêiner ao longo de um eixo principal e distribui o espaço ao longo desse eixo. flex-direction escolhe a direção do eixo principal, enquanto o eixo transversal corre perpendicular a ele; row não é sempre sinônimo de horizontal.

Escolha um contêiner Flexbox e seus itens

O Flexbox se adapta a relações unidimensionais, como itens de navegação, um campo de pesquisa ao lado de um botão ou um ícone ao lado de uma descrição. Espaçar esses elementos com espaços repetidos ou elementos posicionados independentemente é frágil, pois o conteúdo e a largura disponível podem mudar. O Flexbox distribui o espaço disponível de um contêiner entre seus filhos diretos.

Se você precisa de uma grade que alinhe consistentemente linhas e colunas ao mesmo tempo, revise Grid. Flexbox também pode ser dividido em várias linhas, mas cada linha distribui o espaço separadamente, então as colunas na primeira linha nem sempre correspondem às colunas na segunda linha. Uma grande área da página pode ser usada em conjunto como um Grid, e uma coleção de botões dentro dela pode ser usada em conjunto como um Flexbox. Para alinhar múltiplas linhas e colunas juntas, compare Fundamentos de CSS Grid: faixas, linhas e posicionamento que cria linhas e colunas juntas.

.menu {
  display: flex;
  gap: 12px;
}

Esta declaração não é um instrução para dispor o próprio .menu dentro de seu elemento pai. Este é um instrução para dispor os filhos diretamente em .menu. Por exemplo, se você tiver dois divs dentro de um .menu e dois spans dentro do primeiro div, os itens flex são as duas divs. Se você quiser organizar os spans horizontalmente, você também deve especificar um display: flex separado nesse div.

Identifique os eixos principal e transversal

O eixo principal é a direção na qual os itens Flex são listados, e o eixo transversal é a direção perpendicular ao eixo principal. Em vez de memorizar qual propriedade controla a largura ou altura, você precisa entender qual eixo a controla para poder alinhá-la com precisão mesmo quando você a altera para uma coluna.

As instruções nesta tabela assumem writing-mode: horizontal-tb e direction: ltr. Na escrita da direita para a esquerda ou vertical, as direções físicas mudam. row segue a direção inline, então nem sempre começa à esquerda. Para mais detalhes, veja MDN: conceitos básicos de Flexbox, eixos e direção da escrita .

Entenda o comportamento inicial do Flexbox

Se um valor separado não for especificado, a direção é row e a quebra de linha é nowrap. Os itens são agrupados no início do eixo principal e não se expandem automaticamente ao longo do eixo principal para preencher o espaço extra. Podem encolher se houver espaço insuficiente, mas se não puderem encolher o suficiente devido ao tamanho mínimo do conteúdo ou restrições especificadas, podem transbordar para fora do elemento pai. O controle detalhado do alinhamento, quebras de linha e tamanho dos itens será continuado em Flexbox Alinhamento, Quebra de Linhas, gap, grow e shrink.

No eixo transversal, stretch é o comportamento de alinhamento padrão. Itens com altura automática em uma linha geralmente preenchem a mesma altura da linha. É por isso que cartões de descrição curta aparecem da mesma altura que cartões de descrição longa. Não presuma que itens que já têm uma altura definida ou margens automáticas se estenderão automaticamente. Com column na escrita horizontal deste exemplo, o eixo transversal é horizontal, então a largura parece aumentar.

O redimensionamento inicial de um item pode ser entendido como flex: 0 1 auto. 0 significa não aumentar ocupando o espaço restante, 1 significa participar da redução no espaço insuficiente, e auto significa usar a especificação de tamanho e o conteúdo do eixo principal correspondente como base. Nesta etapa, a direção de posicionamento e a operação básica são primeiro verificadas, e a prática de ajustar a proporção e as quebras de linha é detalhadamente abordada na lição de alinhamento e ajuste de tamanho.

Compare o fluxo normal e as direções do Flexbox

Salve o código abaixo como um arquivo UTF-8 flex-direction.html e abra-o no seu navegador. Nenhuma biblioteca separada é necessária. Todos os links estão escritos na ordem de primeiro, segundo e terceiro, e apenas o CSS é diferente. A seção de layout geral especifica os links como blocos e os mostra linha por linha.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>flex-direction.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.demo { border: 2px dashed #789; padding: 12px; margin-bottom: 20px; }
 .demo > a, .nested > div { padding: 12px; background: #dceefa; }
 .normal > a { display: block; margin-bottom: 8px; }
 .row, .column, .reverse, .nested { display: flex; gap: 12px; }
 .column { flex-direction: column; }
 .reverse { flex-direction: row-reverse; }
 .nested > div { flex: 1; min-width: 0; }
 .nested span { display: block; }
 .initial { display: flex; gap: 12px; border: 2px dashed #789; }
 .initial > div { width: 180px; min-width: 0; padding: 12px; background: #e8f5de; }
  </style>
</head>
<body>
<h1>Same HTML order, different placement</h1>
<h2>Normal block flow</h2><div class="demo normal"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>row</h2><div class="demo row"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>column</h2><div class="demo column"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>row-reverse</h2><div class="demo reverse"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>Direct and nested children</h2><div class="demo nested"><div><span>First line of box A</span><span>Second line of box A</span></div><div>Box B</div></div>
<h2>Initial size and growth</h2><div class="initial"><div>Short description</div><div>Two-line description<br>Second line</div><div>Three-line description<br>Second line<br>Third line</div></div>
<p id="result">This is the link destination. Use the links above to check keyboard navigation order.</p>
</body>
</html>

1. Na seção row, certifique-se de que os três itens estejam na mesma linha. Basta adicionar flex-direction: column a .row para alterá-la para vertical. Após a confirmação, remova a declaração e retorne ao row original.
2. Observe como os links na seção da coluna se expandem horizontalmente. Adicionar align-items: flex-start a .column aproxima o link da largura do conteúdo. Isso ocorre porque o eixo transversal da coluna é horizontal. Após comparar, remova a declaração adicionada.
3. Na seção row-reverse, o link First aparece à direita, mas continua primeiro no HTML. Use Tab e confirme a sequência First → Second → Third. A inversão é visual: ela não altera a ordem do DOM nem a navegação pelo teclado. Evite criar uma ordem visual que entre em conflito com a leitura.
4. Em seções filhas aninhadas, apenas as grandes caixas A e B são colocadas lado a lado. Os dois spans em A são verticais. Ao adicionar display: flex à regra .nested > div, a disposição interna dos spans em A também muda. Remova a declaração adicionada após a verificação.
5. Na última seção, certifique-se de que os três cartões tenham a mesma altura e, em telas largas, cada cartão não preencha toda a largura restante. Reduzir a largura da tela diminui a largura do cartão sem quebras de linha. Se você adicionar flex-shrink: 0 ao .initial > div, ele não encolherá, causando transbordamento horizontal. Remova a declaração adicionada após verificar.

Diagnostique resultados inesperados de layout

Nas ferramentas de desenvolvedor, selecione o pai real, não o filho que você deseja ordenar, e verifique o valor aplicado de display. Em seguida, verifique o flex-direction, largura·altura·min-width e margin do filho. Se o flex estiver coberto por outra regra ou o alvo da ordenação estiver um nível mais adiante, você não obterá os resultados esperados.

As quebras de linha são diferentes de mudar linhas e colunas. Em uma situação onde uma linha horizontal transborda, você deve primeiro decidir se a coluna é apropriada e se o flex-wrap é necessário para manter múltiplas linhas. Se o conteúdo estiver oculto no celular, verifique o tamanho mínimo colapsável e a ordem de leitura antes de escondê-lo com overflow: hidden. Modificações temporárias nas ferramentas de desenvolvedor podem ser revertidas com um refresh, e se você modificou um arquivo, precisará restaurar quaisquer valores salvos por conta própria.