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-wrapforwrap.
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-itemsejustify-itemsno flex, basta usar oalign-itemse 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é?
Top comments (6)
Esse é um comentário de uma completa iniciante. Seu artigo esclareceu muito, essa imagem inicial ilustrando os eixos fez TODA a diferença pra mim. Obrigada por trazê-la, acho que essa informação não foi dada tanta importância em outros materiais que acessei.
Fico muito feliz de ler isso, e triste ao mesmo tempo pois na minha pesquisa eu tive que ser bem específico pra achar explicações mais completas sobre isso. Espero que isso mude com o tempo, pq é uma tecnologia incrível.
Engraçado que sempre dá pra aprender algo a mais sobre flexbox.
O capítulo "Pra fechar" foi sensacional, se a gente entender aquilo ali, podemos nos guiar no dia a dia por conta própria.
Sobre o comentário final do tweet, não entendi muito bem a relação com o Tailwind, já que ele usa comandos do próprio CSS no nome das classes. Ainda não estudei ele, mas já ouvi muito que para ficar melhor em Tailwind, basta estudar CSS.
Ótimo artigo!
very pika article, cousin
Thanks cousin