CSS: Principal Diferença Entre justify-content e align-items
E ai galera da tecnologia! Estou aqui para deixar uma informação beeem objetiva para vocês sobre estas duas propriedades citadas no título . Afinal, aprender também envolve ensinar outras pessoas, não é? 😁
Antes de Mais Nada
Primeiramente, estas duas propriedades organizam os elementos dentro de um container flexível. Isso quer dizer que você precisa usar a propriedade display: flex; antes de aplicar qualquer uma delas. Por que? Porque o display-flex torna dinâmica a organização dos elementos dentro do container. Eles ficam responsivos dentro dele.
Justfy-Content X Align-Items
Vamos lá!
- Justify-content: Alinha os elementos do container na horizontal (eixo x);
- Align-items: Alinha os elementos do container na vertical (eixo y)
Esta é a principal diferença entre eles. Porém, quais os valores a serem usados nessas propriedades? Para a nossa alegria, eles têm os mesmos nomes e aplicam os mesmos estilos. Vamos lá!
- Flex-start: Alinha os elementos à direita no justify-content e no topo no align-items;
- Center: Alinha os elementos no centro, evidemtemente e nas duas propriedades;
- Flex-end: Alinha os elementos à esquerda no justify-content e na parte inferior no align-items;
Lembrem-se de que estes valores devem ser usados logo depois das proprieades justify-content e align-items e não sozinhos.
Como eu fiz para memorizar estes pequenos detalhes? Bem pensei na seguinte frase:
"O horizonte é justo (justify-content) e o sol está alinhado (align-items) com a terra"
Bem, pode parecer meio tosco para vocês, mas para mim tá funcionando bem para lembrar o que cada uma delas faz 🤣. O que vale é recordar e saber aplicar, no final de tudo.
Espero ter ajudado em algo. Se quiserem contribuir, corrigir ou acrescentar, sintam-se à vontade! Até mais!
