1
resposta

[Dúvida] Diferença entre align-items e justify-content

Minha dúvida é sobre qual a diferença entre justify-content e align-items. No projeto a instrutora usa align-items, já eu testei o alinhamento da <section> com ambos, e deu o mesmo resultado. O que realmente me causa dúvida é sobre a dierença prática entre as duas propriedades, pois no meu teste usando align-items: center; e align-content: center; o resultado é o mesmo. Agora na aula 3, ao tentar alinhar o conteúdo das colunas de .secundario{align-content: center;} o conteúdo das colunas é empurrado para o topo da coluna Imagem com o conteúdo da página com centralização errada Agora, com o alinhamento sendo feito com .secundario{align-items: center;} como é feito na aula, o conteúdo é alinhado corretamente no centro das duas colunas imagem com  a centralização do conteúdo da página com a centralização correta O que me deixa consfuso é que na documentação do W3S sobre o Container Grid diz que para alinhar o conteúdo da grade do container, deve-se usar a propriedade align-content, inclusive aqui pode ser vizualizado uma demostração dessa propriedade usando o valor center. Porém como demonstrado, no nosso projeto, usar esta propriedade não funcionou como deveria, mesmo que .secundario{} é um .container{display: grid;}.

1 resposta

Boa tarde Rafael! Tudo certo?

As propriedades CSS justify-content e align-items são usadas para alinhar elementos dentro de um container flex ou grid. Embora sejam semelhantes em alguns aspectos, elas têm diferenças sutis em termos de direção de alinhamento e aplicação.

A propriedade justify-content é usada para alinhar os itens ao longo do eixo principal (horizontalmente para um container flex ou verticalmente para um container grid). Ela controla o alinhamento dos itens no sentido horizontal e pode aceitar os seguintes valores:

flex-start: Alinha os itens ao início do container. flex-end: Alinha os itens ao final do container. center: Alinha os itens no centro do container. space-between: Distribui igualmente os itens ao longo do container com espaçamento entre eles. space-around: Distribui igualmente os itens ao longo do container com espaçamento em torno deles. space-evenly: Distribui igualmente os itens ao longo do container com espaçamento uniforme entre eles, incluindo as extremidades. A propriedade align-items é usada para alinhar os itens ao longo do eixo transversal (verticalmente para um container flex ou horizontalmente para um container grid). Ela controla o alinhamento dos itens no sentido vertical e pode aceitar os seguintes valores:

flex-start: Alinha os itens ao início do container. flex-end: Alinha os itens ao final do container. center: Alinha os itens no centro do container. baseline: Alinha os itens de acordo com a linha base (base do texto) do primeiro item. stretch: Estica os itens para preencher o container verticalmente. A diferença entre align-items e align-content é que align-items é aplicada aos itens individuais dentro do container, enquanto align-content é aplicada ao container em si e controla o espaçamento entre as linhas de itens dentro do container.

No caso do seu projeto, se você está trabalhando com um container flex, a propriedade correta para alinhar o conteúdo verticalmente é align-items. Já a propriedade align-content é usada em containers grid para controlar o espaçamento entre as linhas de itens.

Pode haver casos em que o uso de align-content em um container grid não produza o resultado desejado, como no exemplo que você mencionou. Nesses casos, é melhor usar align-items para alinhar o conteúdo individualmente dentro das colunas.

É importante lembrar que o comportamento das propriedades pode variar dependendo do contexto, da estrutura do HTML e do restante das propriedades CSS aplicadas. Sem ver o código específico e o contexto do seu projeto, é difícil fornecer uma solução exata para o problema encontrado. No entanto, espero que essa explicação ajude a esclarecer a diferença entre justify-content, align-items e align-content e como aplicá-las corretamente.

Atenciosamente,

Wankerson Rodrigues