Flexbox

Propriedade para o elemento pai

display: flex;

Define um display flexível para um elemento, tornando-o um contêiner flexível para seus itens.

flex-direction: row;

Estabelece o eixo principal, definindo assim a direção em que os itens flex são colocados no contêiner flex. Flexbox é um conceito de layout de direção única. Pense nos itens flex como dispostos principalmente em linhas horizontais ou colunas verticais.

flex-wrap: wrap

Por padrão, os itens flex tentarão se encaixar em uma linha. Você pode mudar isso e permitir que os itens se ajustem conforme necessário com esta propriedade.

justify-content

Define o alinhamento ao longo do eixo principal. Ajuda a distribuir o espaço livre extra restante quando todos os itens flexíveis em uma linha são inflexíveis ou são flexíveis, mas atingiram seu tamanho máximo.

align-itens

Isto define o comportamento padrão de como os itens flex são dispostos ao longo do eixo transversal na linha atual. Pense nisso como a justify-content versão para o eixo transversal (perpendicular ao eixo principal).

gap, row-gap, column-gap

A propriedade gap controla o espaçamento entre os itens flexíveis. Você pode definir um espaçamento padrão para todas as direções ou especificar espaçamentos diferentes para as linhas e colunas.

Propriedade para os elementos filhos

flex-grow;

Define a capacidade de um item flex crescer, se necessário. Ele distribui o espaço extra ao longo do eixo principal. Se todos os itens flexíveis tiverem flex-grow definido como 1, o espaço extra será distribuído igualmente entre eles. Valores negativos são inválidos. O valor padrão é 0.

flex-shrink;

Define a capacidade de um item flexível encolher, se necessário. O valor inicial é 1.

flex-basis;

Define o tamanho inicial de um item flexível antes que o espaço extra seja distribuído. O valor padrão é auto. Pode ser um valor fixo (em px, em, rem, etc.) ou um valor relativo (porcentagem).

Flexbox: Flexible Box Layout Module