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:
Mas serasse não tem padronização mesmo? ....
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 oflex-wrap
forwrap
.
A imagem abaixo feita pela Samantha Ming demonstra bem o conceito. O artigo também é ótimo.
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.
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.
Imagens do cheatsheet de Flexbox do site Origamid
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.
Imagens do cheatsheet de Flexbox do site Origamid
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 usaralign-items
ejustify-items
no flex, basta usar oalign-items
e mudar a direção do eixo viaflex-direction
.
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
|
---|---|
Imagens do cheatsheet de Flexbox do site Origamid
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
.
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.
Babado extra
Notaram essa parte do xweet?
Vocês tem opiniões sobre essa afirmação? Conta ai pra mim, quem sabe não escrevo sobre e a gente discute, né?