O que são? caixas flexíveis, trabalha a resposividade, se adapta ao dispositivo em que se está sendo aberto o site. É composta por duas div, a primeira 'pai' que engloba tudo e as de dentro 'filhos'.
Flex-direction
Na horizontal: row → as caixas são dispostas da esquerda para direita | row-reverse → as caixas são adicionadas da direita para esquerda.
Na vertical: column → itens são dispostos de cima para baixo | column-reverse → itens são empilhado de baixo para cima
Eixos (axis)
Main-axis → eixo principal, definido pelo flex-direction e Cross-axis → eixo transversal ao main-axis.
| Flex-direction /Axis | row | row-reverse | column | column-reverse |
| main-axis | horizontal (esquerda → direita) | horizontal (direita → esquerda) | vertical (cima → baixo) | vertical (baixo → cima) |
| cross-axis | vertical (cima → baixo) | vertical (cima → baixo) | horizontal (esquerda → direita) | horizontal (esquerda → direita) |
Esses conceitos são importantes para entender propriedades como justify-content (alinha no main-axis) e align-items (alinha no cross-axis).