Ir para o conteúdo

← Trilha· Lição 4 de 9

Flexbox: eixos e alinhamento

Distribua itens em uma dimensão com flex.

Flexbox brilha quando você tem uma linha ou coluna de itens:

.container {
  display: flex;
  gap: 1rem;
  justify-content: space-between; /* eixo principal */
  align-items: center;            /* eixo cruzado */
}

Quando usar

Menus, toolbars, centralizar um bloco, cartões em fila. Para grades de duas dimensões, prefira Grid.

Veja Centralizar com Flexbox e o snippet Centralizar com Flex.

Pratique