Visualize o contêiner flex e os itens para ver claramente como os elementos filhos se posicionam dentro do contêiner flex
Ajuste as propriedades flexbox para observar diferentes efeitos de alinhamento e distribuição
Direção dos itens flex
Alinhamento dos itens ao longo do eixo transversal
Alinhamento e distribuição ao longo do eixo principal
Se os itens quebram para novas linhas
Alinhamento das linhas quebradas ao longo do eixo transversal
flex-direction: row | align-items: center | justify-content: flex-start | flex-wrap: nowrap | align-content: stretchContêiner flex com itens de diferentes tamanhos para demonstrar efeitos de alinhamento flexbox
row - Itens fluem horizontalmente (esquerda para direita)row-reverse - Itens fluem horizontalmente (direita para esquerda)column - Itens fluem verticalmente (cima para baixo)column-reverse - Itens fluem verticalmente (baixo para cima)nowrap - Itens permanecem em uma única linhawrap - Itens quebram para novas linhas conforme necessáriowrap-reverse - Itens quebram para novas linhas em ordem reversaflex-start - Alinhar itens ao início do eixo transversalcenter - Centralizar itens no eixo transversalflex-end - Alinhar itens ao final do eixo transversalstretch - Esticar itens para preencher o eixo transversalbaseline - Alinhar itens ao longo de sua linha de baseflex-start - Agrupar itens no início do eixo principalcenter - Centralizar itens no eixo principalflex-end - Agrupar itens no final do eixo principalspace-* - Distribuir espaço entre itens