CSS Flexbox e seus alinhamentos
Tags: css, flexbox, webdev, portugues
Published: 2023-06-16 21:34:26

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:
```css
.selector { display: flex; }
```
- **Flex-item:** é cada um dos nodos-filhos (descendente direto) do elemento HTML descrito acima.
```xml
<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.
![Image1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eef4lnr6fjmjsf0tpkdr.png)
- **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.