Folha de Atalhos de Layout CSS Flexbox
Esta página fornece uma folha de atalhos visual para layout CSS Flexbox, incluindo propriedades do contêiner, propriedades dos itens e exemplos comuns de layout.
Propriedades do Contêiner
| Propriedade | Valor | Descrição |
|---|---|---|
display |
flex |
Habilita o layout elástico (flex) |
flex-direction |
row |
O eixo principal é horizontal, ponto de partida à esquerda |
row-reverse |
O eixo principal é horizontal, ponto de partida à direita | |
column |
O eixo principal é vertical, ponto de partida no topo | |
column-reverse |
O eixo principal é vertical, ponto de partida na base | |
flex-wrap |
nowrap |
Valor padrão, itens organizados em uma única linha |
wrap |
Itens quebram de linha | |
wrap-reverse |
Itens quebram de linha na direção reversa | |
justify-content |
flex-start |
Alinhamento do eixo principal: alinhado à esquerda |
flex-end |
Alinhamento do eixo principal: alinhado à direita | |
center |
Alinhamento do eixo principal: centralizado | |
space-between |
Alinhamento do eixo principal: justificado, com espaços iguais entre os itens | |
space-around |
Alinhamento do eixo principal: espaços iguais ao redor de cada item | |
align-items |
flex-start |
Alinhamento do eixo transversal: alinhado ao topo |
flex-end |
Alinhamento do eixo transversal: alinhado à base | |
center |
Alinhamento do eixo transversal: centralizado | |
baseline |
Alinhamento do eixo transversal: alinhado pela linha de base do texto | |
stretch |
Valor padrão, alinhamento do eixo transversal: esticado para preencher o contêiner | |
align-content |
flex-start |
Alinhamento do eixo transversal (múltiplas linhas): alinhado ao topo |
flex-end |
Alinhamento do eixo transversal (múltiplas linhas): alinhado à base | |
center |
Alinhamento do eixo transversal (múltiplas linhas): centralizado | |
space-between |
Alinhamento do eixo transversal (múltiplas linhas): justificado, com espaços iguais entre as linhas | |
space-around |
Alinhamento do eixo transversal (múltiplas linhas): espaços iguais ao redor das linhas | |
stretch |
Valor padrão, alinhamento do eixo transversal (múltiplas linhas): esticado para preencher o espaço restante |
Propriedades dos Itens
| Propriedade | Valor | Descrição |
|---|---|---|
flex-grow |
número |
Define a proporção de crescimento do item, padrão 0 (não cresce) |
flex-shrink |
número |
Define a proporção de encolhimento do item, padrão 1 |
flex-basis |
auto |
Define o tamanho base de um item antes da distribuição do espaço restante |
align-self |
auto |
Permite o alinhamento individual de um item, sobrescrevendo a propriedade align-items |
flex-start |
O item é posicionado no início do contêiner | |
flex-end |
O item é posicionado no fim do contêiner | |
center |
O item é posicionado no meio | |
baseline |
A linha de base do item é alinhada com a linha de base do contêiner | |
stretch |
O item é esticado para preencher o contêiner (se houver altura definida) |
Exemplos Comuns de Layout
| Layout | Propriedades do Contêiner | Propriedades dos Itens |
|---|---|---|
| Barra de navegação horizontal | display: flex;justify-content: space-around; |
|
| Barra lateral vertical | display: flex;flex-direction: column;justify-content: flex-start; |
|
| Layout de grade | display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| Layout de cartões | display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |