Flexbox

A caixa se torna flex, fazendo com que os elementos internos possam receber melhor.

Alinhamento

Ordenação

Tamanhos flexíveis

Direção dos itens

Flex é uma dimensão (horizontal ou vertical)

podemos mudar a direção com flex-direction

valores (row/row-reverse/column/column-reverse)

Multiplas Linhas

Podemos usar multi linhas.

flex-wrap

valores(wrap/wrap-reverse/nowrap)

Alinhamento dos itens no eixo principal

justify-content

valores

flex-start

flex-end

center

space-around

space-between

space-evenly

Alinhamento dos itens no eixo cruzado

align-itens

valores

stretch

flex-start

flex-end

center

Espaço entre os elementos

gap

valores

Unidades de medidas

fixas: px, pt

flexíveis: %, em, rem

Propriedades para os itens

Largura e altura com flex-basis

Crescimento e adaptação dos itens com flex-grow

Encolhimento e encaixe dos elementos com flex-shrink

Ordenando itens com o Order