Flexbox

Página 1

1 - precisa chamar o recurso, iniciando por:

DISPLAY: FLEX;

2- Precisa definir se vai ficar em linha ou em coluna.

FLEX-DIRECTION: ROW;

FLEX-DIRECTION: COLUMN;

ou de ordem reversa:

FLEX-DIRECTION: ROW-REVERSE;

FLEX-DIRECTION: COLUMN-REVERSE;

3- DEFINIR SE OS ITENS TERÁ QUEBRA DE LINHA OU NÃO:

FLEX-WRAP: NOWRAP;

FLEX-WRAP: WRAP;

ou de ordem reversa

FLEX-WRAP: NOWRAP-REVERSE;

FLEX-WRAP: WRAP-REVERSE;

4- FORMA RESUMIDA DE DEFINIR VALORES DO FLEX-DIRECTION E NOWRAP:

FLEX-FLOW: ROW WRAP-REVERSE;

5- ALINHAMENTO ORIZONTAL

JUSTIFY- CONTENT: FLEX-START; alinhar da esquerda pra direita

JUSTIFY- CONTENT: FLEX-END; alinhar da direita pra esquerda

JUSTIFY- CONTENT: FLEX-CENTER; alinhar nossos itens ao centro

JUSTIFY- CONTENT: SPACE-BETWEEN; criar espaçamento entre os itens

JUSTIFY- CONTENT: SPACE-AROUD; criar espaçamento entre os itens incluindo as extremidades

6- ALINHAMENTO VERTICAL

ALIGN-ITEMS: STRETCH; Defini que os itens cresçam igualmente

ALIGN-ITEMS: flex-start; Vai alinhar no top do container

ALIGN-ITEMS: flex-end; Vai alinhar na base do container

ALIGN-ITEMS: flex-center; Vai alinhar no centro do container

ALIGN-ITEMS: baseline; Vai alinhar no conteudo

7- ALINHAMENTO VERTICAL EM MULTILINE (QUEBRAR DE ITENS)