Flexbox
O jeito de empilhar coisas em uma linha ou em uma coluna e distribuir o espaço entre elas.
Também aparece como "display: flex", "flex", "caixa flexível".
No mundo do Design
O Figma chama isso de Auto layout
Flexbox é o auto layout. Não é parecido com o auto layout, é a mesma coisa: o Figma copiou o modelo do CSS e trocou os nomes dos campos.
Você diz que um elemento é flex e os filhos dele passam a se organizar em uma direção só, dividindo o espaço que sobra.
A tradução direta
| No mundo do Design | No CSS |
|---|---|
| Direção horizontal ou vertical | flex-direction: row ou column |
| Espaçamento entre itens | gap |
| Alinhamento nos dois eixos | justify-content e align-items |
| Hug contents | width: fit-content |
| Fill container | flex: 1 |
| Space between | justify-content: space-between |
.barra {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
justify-content: space-between;
}O detalhe que confunde
justify-content age no sentido da direção e align-items no sentido contrário. Numa linha, justify empurra na horizontal e align na vertical. Se você trocar a direção para coluna, os dois trocam de eixo junto. É a mesma inversão que acontece quando você muda o auto layout de horizontal para vertical.
Veja também Grid, que resolve o caso de duas dimensões ao mesmo tempo.
Outros termos de CSS
Quer o assunto inteiro e não só a definição? Os guias pegam cada tema do começo ao fim.