Todas as propriedades flexbox comuns, agrupadas por onde se aplicam: no contentor e no item. Cada linha associa a propriedade aos seus valores comuns e ao que ela faz.
O Flexbox dispõe os elementos numa única dimensão: uma linha ou uma coluna. Defina display: flex no elemento pai e ele torna-se o contentor flex; os seus filhos diretos tornam-se itens flex. As propriedades do contentor controlam a distribuição no eixo principal e no eixo transversal; as propriedades do item controlam como um item individual cresce, encolhe ou se alinha. Escolha flexbox para barras, linhas e centragem unidimensionais.
Tabela de referência · 13 entradas
CSS FlexboxExplained
13 of 13 rows
Contentor
flex | inline-flex
Torna o elemento num contentor flex.
row | column | row-reverse | column-reverse
Define o eixo principal ao longo do qual os itens fluem.
flex-start | center | space-between | space-around | space-evenly
Distribui os itens ao longo do eixo principal.
stretch | center | flex-start | flex-end | baseline
Alinha os itens ao longo do eixo transversal.
flex-start | center | stretch | space-between
Alinha as linhas resultantes da quebra (wrap) quando há espaço extra no eixo transversal.
nowrap | wrap | wrap-reverse
Permite que os itens passem para novas linhas em vez de encolher.
0.5rem | 8px 16px
Espaço entre os itens, na horizontal e na vertical.
Item
0 | 1 | 2
Quanto do espaço livre o item absorve em relação aos seus irmãos.
0 | 1
Quanto o item encolhe quando não há espaço suficiente.
auto | 200px | 50%
O tamanho inicial antes de o espaço livre ser distribuído.
1 | 1 0 auto | 0 0 200px
Atalho para grow shrink basis.
auto | center | flex-start | flex-end | stretch
Sobrepõe o align-items do contentor para um único item.
0 | -1 | 2
Reordena um item sem alterar a ordem no código-fonte.