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á!

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
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!