1
resposta

align-items ou justify-content?

Nos meus projetos eu sempre fico na dúvida se devo usar o align-items ou justify-content. Para colocar o botão Ver mais no centro o professor utilisou o "justify-content", fiz e mesma coisa e deu certinho. Mas durante o desafio eu fui colocar a mesma propriedade (justify-content") para colocar o botão "ver mais" da lista "agenda__lista" no centro porem não funcionou, então eu tentei com o align-items e o botão ficou no meio certinho! Por que isso aconteceu? Vou compartilhar uma parte do código para ajudar:

/* código feito durante a aula*/
.eventos__lista {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 1rem;
    justify-content: center; /* propriedade usada para deixar o botão no meio*/
}
.eventos__item {
    flex-grow: 1;
    max-width: 400px;
}

/* código que eu fiz no desafio*/
.agenda__lista {
    display: flex;
    flex-direction: column;
    align-items: center;  /*a propriedade que deu certo para deixar o botão no meio*/
    row-gap: .5rem;
}

(e uma dúvida que me aparaceu agora, eu estou falando certo quando eu chamo isso de propriedade? Eu sempre fico confusa com esses nomes rsrs) Obrigado pela ajuda desde já!

1 resposta

Olá, Thaynara!

Ambas as propriedades são usadas para alinhar os itens dentro de um container flex.A diferença entre elas está na direção do alinhamento. A propriedade align-items alinha os itens no eixo Y(verticalmente, no caso de um container com flex-direction: column), enquanto a propriedade justify-content alinha os itens no eixo X (horizontalmente, no caso de um container com flex-direction: row).

No caso do código que você compartilhou, a propriedade justify-content foi usada na classe .eventos__lista para centralizar o botão "Ver mais" horizontalmente. Isso funciona porque o container tem flex-direction: row não explicitamente mas só de tornar display flex ele por padrão e row, ou seja, o eixo principal é horizontal.

Já na classe .agenda__lista, você usou a propriedade align-items para centralizar o botão "Ver mais" verticalmente. Isso ocorre porque o container tem flex-direction: column, ou seja, o eixo principal é vertical.

Quanto à sua dúvida sobre o termo "propriedade", você está usando corretamente! No contexto de CSS, chamamos de "propriedades" as características que definem o estilo de um elemento, pense como propriedade o seguinte exemplo. Imagine que uma página da web é como uma casa, e cada elemento HTML nessa página (como parágrafos, imagens, botões, etc.) é como um móvel ou objeto dentro dessa casa. Agora, pense nas "propriedades" como os recursos que você tem para personalizar e organizar esses objetos na casa de acordo com seu gosto, cor da mesa, cor da geladeira, papel de parede, dentre outros rs.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!