CSS Flexbox e seus alinhamentos

Inicialmente, para entender como funciona o alinhamento de items presentes em um Flexbox, é necessário descrever diversas definições, em cada possível segmento interno de um elemento HTML que utilize Flexbox.

Definições

• Flexbox container: é o elemento que recebe a "css rule" declararada como:

.selector { display: flex; }

• Flex-item: é cada um dos nodos-filhos (descendente direto) do elemento HTML descrito acima.

<parent>
    <child-1></child-1>
    <child-2></child-2>
</parent>

• Flex-line: é linha vertical ou horizontal, do flexbox container, no qual os flex-items se distribuem.
• main-axis: o eixo no qual os flex-items são dispostos conforme são incluídos dentro do flex-container.
• cross-axis: o eixo (oposto à main-axis) no qual as flex-lines são dispostas. Isso só ocorre quando existe a possibilidade dos flex-items ultrapassarem os limites do seu "nodo-pai", ou seja, o flex container. Eles podem overflow o limite dele ou podem quebrar as flex-lines em mais do que uma, gerando um flex-container com múltiplas linhas ou colunas (verticais ou horizontais).
• main-start e main-end: Definem respectivamente o lado de início e o lado do fim da main-axis.
• cross-start e cross-end: Definem respectivamente o lado de início e o lado do fim da cross-axis.

A direção e o sentido no qual os flex-items são dispostos depende da propriedade css flex-direction.

O alinhamento flex e as propriedades CSS

Em relação ao alinhamento dos flex-items, existem diversos tipos diferenciados de alinhamento, e todos eles levam em consideração dois tipos de agrupamento de conteúdo:

• os flex-items presentes em uma única flex-line.
• todas as flex-lines presentes dentro do flex-container.

NOTA: É importante salientar que, quando o flex-container dispõe os flex-items ao longo da main-axis, por default, todos os flex-items sofrem uma expansão no sentido da cross-axis. Por exemplo, se o sentido da main-axis for horizontal e o da cross-axis for vertical, a height de cada flex-item se expande para preencher o espaço vertical restante do flex-container.

A seguir são descritos os comportamentos de cada propriedade CSS relacionada ao alinhamento resultante em um flexbox:

• justify-content: alinha ou dispõe os flex-items ao longo da main-axis da flex-line na qual eles estão inseridos, sendo esse efeito aplicado também em cada uma das flex-lines presentes dentro do flex-container.
• align-content: alinha ou dispõe as flex-lines ao longo da cross-axis do flex-container. Ao aplicar alguns valores nessa propriedade, o comportamento default de expansão de cada flex-items no sentido da cross-axis deixa de ser executado automaticamente.
• justify-items: se aplica somente a grid containers.
• align-items: alinha ou dispõe os flex-items ao longo da cross-axis da flex-line na qual eles estão inseridos. Ao aplicar alguns valores nessa propriedade, o comportamento default de expansão de cada flex-items no sentido da cross-axis também deixa de ser executado automaticamente.