Flexbox: ejes y alineación

TODO i18n: Traducción completa del cuerpo pendiente. Título y descripción ya están localizados; el cuerpo permanece en portugués por ahora.

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.