Minha dúvida e entender qual seria a principal diferença entre eles e quando a situação correta para utilizar
Minha dúvida e entender qual seria a principal diferença entre eles e quando a situação correta para utilizar
Olá, Julio! Tudo bem?
Sua dúvida é excelente e mostra que você está começando a olhar para o CSS de forma mais conceitual, não apenas tentando “fazer funcionar”. Esse tipo de questionamento faz muita diferença na evolução com Flexbox.
Quando falamos de alinhamento em CSS, é comum surgir confusão entre algumas propriedades, principalmente entre text-align, justify-content e align-items, já que todas podem, em algum momento, “centralizar” algo na tela, mas cada uma atua de forma diferente.
O text-align é uma propriedade mais tradicional, usada para alinhar textos e elementos inline dentro de um bloco. Ela atua no fluxo normal do documento, fora do contexto de Flexbox ou Grid. Por isso, quando usamos text-align: center, estamos centralizando o conteúdo textual dentro do elemento.
Já o justify-content entra em cena quando o elemento pai está com display: flex. Ele controla como os itens são distribuídos ao longo do eixo principal, que normalmente é o horizontal. É ele quem define se os elementos ficam agrupados no centro, espalhados, com espaço entre eles ou ao redor.
O align-items, também do Flexbox, atua no eixo transversal, geralmente o vertical. Ele define como os itens se comportam em relação à altura do container, evitando que fiquem presos ao topo ou à base, por exemplo, quando usamos align-items: center.
Em resumo, a diferença principal não está no “resultado visual” apenas, mas no eixo em que cada propriedade trabalha dentro do Flexbox.
Para consolidar bem esses conceitos de eixos e alinhamentos, recomendo a leitura deste artigo da Alura, que funciona como um verdadeiro guia de bolso sobre Flexbox:
Continue praticando e explorando esses conceitos com calma. Entender bem os eixos do Flexbox torna o alinhamento muito mais intuitivo com o tempo.
Bons estudos!
Sucesso ✨
Para saber mais:
ARTIGO