Align e Justify no Flexbox e no Grid pra você nunca mais confundir
Tags: beginners, webdev, braziliandevs, css
Published: 2023-09-23 01:36:42

Você já percebeu como `justify-` e `align-` funcionam um pouco diferente no Flexbox e no Grid? Os comandos "invertendo" quando você muda o `flex-direction`, o `grid` se comportando diferente do esperado quando você usa `place-content` ao invés de `place-items`. O tweet abaixo resume bem:

{% tweet 1679610190608384000 %}

&nbsp;

> Mas serasse não tem padronização mesmo? ....


<br />

---

<br />

## Os eixos

Primeiro: Não pensem em `justify-` e `align-` (content e items) como propriedades de flexbox ou grid, elas são propriedades de layout baseadas em eixos.

`flex` e `grid` são duas propriedades de display que ordenam elementos através de seus eixos (_axis_).

> 📝 **Pra lembrar!**
O Flexbox tem o _main-axis_ e o _cross-axis_. **O _main-axis_ dita a direção em que os elementos vão se enfileirar, o _cross-axis_ dita a direção que eles vão se empilhar** quando o `flex-wrap` for `wrap`.

&nbsp;

[A imagem abaixo feita pela Samantha Ming](https://www.samanthaming.com/flexbox30/4-flexbox-axes/) demonstra bem o conceito. O artigo também é ótimo.


<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9v0pu4ovhverzcasupyg.png" alt=""/>
  <figcaption>Na imagem, os eixos do flexbox. Quando o flex-direction é de coluna, o cross-axis vem de cima pra baixo e o main-axis da esquerda pra direita. Já na coluna o main-axis vem de cima pra baixo e o cross-axis da esquerda pra direita. Com reverse, o mesmo, mas com a direção dos eixos invertida. 
  </figcaption>
</figure>

&nbsp;

Esses eixos servem de guias pra que o flex saiba pra onde enfileirar e empilhar os itens quando você usa o `flex-wrap: wrap` e muda a orientação do eixo usando column / reverse.

Os eixos no grid funcionam de forma diferente.

No grid temos o _column-axis_ e o _row-axis_, **que são respectivamente colunas e linhas** - só isso.

O grid não precisa de uma lógica de mudança de fluxo de eixos (como `flex-direction`) pois o container pai, aquele que você aplica o grid, que tem controle do layout, não os seus filhos.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dolphqk9y1cja4tyycgt.png" alt="Na imagem, o block-axis é o eixo da coluna e o inline axis é o eixo das linhas"/>
  <figcaption>Imagem da MDN.</figcaption>
</figure>

<br />

---

<br />

## Justify

**Justify Content**

Ele define como o navegador distribui o espaço entre e ao redor dos elementos.

🔹 No flex ele usa o _main-axis_
Ou seja, o eixo que ele enfileira, seja column ou row.

🔹 No grid-ele usa o _inline-axis_
Ele usa sempre a linha, a grid-row.

Na imagem abaixo, os elementos estão empilhados verticalmente. Quando em coluna, o _main-axis_ vem de cima pra baixo, fazendo os elementos empilharem. Como o justify segue o eixo do _main-axis_, ele vai espaçar os elementos verticalmente.

![""](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8q5x218xjhnjko4iimt.png)
<small>Imagens do [cheatsheet de Flexbox do site Origamid](https://origamid.com/projetos/flexbox-guia-completo/)</small>

&nbsp;

Na imagem abaixo, o container tá com `flex-direction: row`, seu _main-axis_ está na horizontal, logo, o `justify-content` distribui os itens horizontalmente. Pelo _cross-axis_ vir de cima pra baixo, quando aplicado `flex-wrap: wrap`, os itens excedentes vão quebrar pra linha de baixo.

![""](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jz4pnz36f4a8emfjejkj.png)
<small>Imagens do [cheatsheet de Flexbox do site Origamid](https://origamid.com/projetos/flexbox-guia-completo/)</small>

&nbsp;

**Justify Items**

Ele aplica a propriedade `justify-self` em todos os filhos, dessa forma cada item é alinhado individualmente seguindo seu eixo.

🔹 No flexbox ele é ignorado.

🔹 No grid-ele alinha o elemento dentro de sua `grid-area` no eixo _inline_ (horizontalmente).

> **❓ Mas porque ele é ignorado?**
No flexbox essa propriedade é ignorada pois o flexbox é unidimensional, diferente do grid. Ao invés de usar `align-items` e `justify-items` no flex, basta usar o `align-items` e mudar a direção do eixo via `flex-direction`.

<br />

---

<br />

## Align

**Align Items**
Ele aplica a propriedade `align-self` em todos os filhos, fazendo cada um deles se alinhar pra mesma direção do _cross-axis_.

🔹 No flexbox ele alinha os filhos no _cross-axis_.

🔹 No grid-ele alinha o elemento dentro de sua `grid-area` no eixo _block_ (mais conhecido como coluna, ou eixo y).

Na imagem abaixo vemos que definir o `align-items: flex-start` alinha os elementos do lado **oposto** da direção do _cross-axis_. `flex-end` seria o contrário, por exemplo.

| Row e `align-items: flex-start` | Column e `align-items: flex-start` |
| --- | --- |
| ![""](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a847sjbwsymlb6f1mjb.png) | ![""](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3209y791quc8ma2wls18.png) |

<small>Imagens do [cheatsheet de Flexbox do site Origamid](https://origamid.com/projetos/flexbox-guia-completo/)</small>

&nbsp;

**Align Content**
Ele define como o navegador distribui o espaço entre e ao redor dos elementos (que nem o justify).

🔹No flex ele usa o _cross-axis_
Ou seja, o eixo que ele empilha

🔹No grid-ele usa o _column-axis_
Ele usa sempre a coluna, a `grid-column`.

<br />

---

<br />

## Pra fechar

Facilitou pra mim tentar entender um padrão das nomenclaturas `align` e  `justify`, na minha opinião, é algo assim:

**🔹 Justify / Align**
Define qual eixo vai ser distribuído ou orientado.

**🔹 -items**
Alinha os itens à partir do eixo.

**🔹 -content**
Alinha os eixos.

<br />

---

<br />

## Babado extra

Notaram essa parte do xweet?

![Se até uma pessoa que trabalha há anos com CSS se confunde com essa falta de padronização as vezes, não é atoa que Tailwind só cresce...](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vo30by4380n939v5i9od.png)

Vocês tem opiniões sobre essa afirmação? Conta ai pra mim, quem sabe não escrevo sobre e a gente discute, né?