Folha de dicas de layout CSS Flexbox

O modelo de layout Flexbox (Flexible Box) fornece uma maneira mais eficiente de alinhar e distribuir itens dentro de um contentor, mesmo quando o seu tamanho é desconhecido ou dinâmico.

Contentor Flex

Set on parent: display: flex; or display: inline-flex;

Propriedade	Descrição	Valores Comuns
`flex-direction`	Direção do eixo principal	`row`, `row-reverse`, `column`, `column-reverse`
`flex-wrap`	Se deve quebrar linha	`nowrap`, `wrap`, `wrap-reverse`
`flex-flow`	Atalho para direção e quebra de linha	`row wrap`
`justify-content`	Alinhamento no eixo principal	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`
`align-items`	Alinhamento no eixo transversal	`flex-start`, `flex-end`, `center`, `baseline`, `stretch`
`align-content`	Alinhamento de múltiplas linhas no eixo transversal	`flex-start`, `flex-end`, `center`, `space-between`, `stretch`

Itens Flex

Set on children:

Propriedade	Descrição	Padrão
`order`	Ordem de disposição (valores menores vêm primeiro)	`0`
`flex-grow`	Proporção de crescimento (quando há espaço)	`0`
`flex-shrink`	Proporção de encolhimento (quando falta espaço)	`1`
`flex-basis`	Tamanho base antes da distribuição de espaço	`auto`
`flex`	Atalho para grow, shrink e basis	`0 1 auto`
`align-self`	Permite alinhamento diferente para um único item	`auto`

Conceitos Básicos

Eixo Principal (Main Axis): Horizontal por padrão, definido por flex-direction.
Eixo Transversal (Cross Axis): A direção perpendicular ao eixo principal.

Exemplos de Cenários

Centramento horizontal e vertical

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Distribuição de largura igual

.item {
  flex: 1; /* Ocupar uniformemente o espaço restante */
}

Alinhamento nas extremidades (Space Between)

.navbar {
  display: flex;
  justify-content: space-between;
}