O Flexible Box Layout, ou Flexbox, é um modelo de layout unidimensional que oferece uma maneira eficiente de alinhar e distribuir espaço entre itens em um contêiner.
Para começar, aplique display: flex; ao elemento pai (o contêiner).
Define a direção do eixo principal (como os itens são organizados).
row (padrão): Itens em linha, da esquerda para a direita.row-reverse: Itens em linha, da direita para a esquerda.column: Itens em coluna, de cima para baixo.column-reverse: Itens em coluna, de baixo para cima..container { display: flex; flex-direction: row; }Alinha os itens ao longo do eixo principal.
flex-start (padrão): Agrupa os itens no início.flex-end: Agrupa os itens no final.center: Centraliza os itens.space-between: Espaço igual entre os itens.space-around: Espaço igual ao redor de cada item..container { display: flex; justify-content: space-between; }Alinha os itens ao longo do eixo transversal (o eixo perpendicular ao principal).
stretch (padrão): Estica os itens para preencher o contêiner.flex-start: Alinha os itens no início do eixo transversal.flex-end: Alinha os itens no final.center: Centraliza os itens..container { display: flex; align-items: center; }Permite que os itens quebrem para a próxima linha se não houver espaço suficiente.
nowrap (padrão): Todos os itens em uma única linha.wrap: Os itens quebram para a próxima linha, se necessário..container { display: flex; flex-wrap: wrap; }Define a capacidade de um item "crescer" para ocupar o espaço livre no contêiner. O valor é um número que representa uma proporção.
.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; } /* Ocupará o dobro do espaço livre que o item 1 */Altera a ordem visual dos itens, independentemente de sua ordem no HTML. O padrão é 0.
.item1 { order: 3; }
.item2 { order: 1; }
.item3 { order: 2; }