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.
Top comments (0)