Folha de consulta de CSS Flexbox: propriedades e valores
O Flexbox dispõe itens em uma dimensão — uma linha ou uma coluna — e distribui o espaço entre eles. As propriedades se dividem em dois grupos: as que você define no contêiner (o pai flex) e as que define nos itens (seus filhos).
O modelo mental: flex-direction define o eixo principal; justify-content alinha ao longo dele, e align-items alinha ao longo do eixo cruzado perpendicular.
Atualizado 2026-07-06
Propriedades do contêiner (o pai flex)
| Propriedade | Valores | O que faz |
|---|---|---|
| display | flex | inline-flex | Transformar um elemento em contêiner flex |
| flex-direction | row | row-reverse | column | column-reverse | Direção do eixo principal |
| flex-wrap | nowrap | wrap | wrap-reverse | Se os itens quebram para novas linhas |
| justify-content | flex-start | center | flex-end | space-between | space-around | space-evenly | Alinhamento ao longo do eixo principal |
| align-items | stretch | flex-start | center | flex-end | baseline | Alinhamento ao longo do eixo cruzado |
| align-content | flex-start | center | space-between | stretch | Alinha as linhas quebradas (múltiplas linhas) |
| gap | <length> (e.g. 16px) | Espaço entre os itens |
Propriedades dos itens (os filhos)
| Propriedade | Valores | O que faz |
|---|---|---|
| flex-grow | 0 | <number> | Quanto um item cresce para preencher o espaço |
| flex-shrink | 1 | <number> | Quanto um item encolhe quando o espaço é apertado |
| flex-basis | auto | <length> | O tamanho inicial do item antes de crescer/encolher |
| flex | e.g. 1 1 0 | 1 | auto | Atalho para grow, shrink e basis |
| align-self | auto | center | flex-start | flex-end | stretch | Substituir align-items para um item |
| order | 0 | <integer> | Reordenar um item visualmente (o menor vem primeiro) |
O truque de centralização mais comum: no contêiner, defina display: flex; justify-content: center; align-items: center; para centralizar um filho horizontal e verticalmente. Para as unidades de tamanho usadas nesses valores, veja a referência de unidades CSS.