Skip to content

← Trail· Lesson 4 of 9

Flexbox: axes and alignment

Distribute items in one dimension with flex.

TODO i18n: Full body translation pending. Title and description are localized; the body below remains in Portuguese for now.

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.

Practice