Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] E se eu quisesse alterar o espaçamento de linhas. Usaria justify-content?gap?Align-items?

Talvez em conjunto do flex-direction? Eu realmente dei uma bugada nessa parte, poderia me ajudar por favor?

2 respostas
solução!

Boa tarde David! Tudo certo ?

Cara, vamos falar das funções de cada um, mas todavia, para alterar o espaçamento de linhas em um layout flexbox, você pode usar as propriedades justify-content, align-items e gap, em conjunto com flex-direction.

Vou explicar cada uma delas:

  1. flex-direction: Essa propriedade define a direção do eixo principal dos elementos flex. Se você deseja alterar o espaçamento de linhas, pode utilizar flex-direction: column, que organiza os elementos de cima para baixo, formando colunas.

  2. justify-content: Essa propriedade controla o alinhamento dos elementos no eixo principal (horizontal, quando flex-direction: row e vertical, quando flex-direction: column). Para aumentar o espaçamento vertical entre as linhas, você pode usar justify-content: space-between ou justify-content: space-around.

  3. align-items: Essa propriedade controla o alinhamento dos elementos no eixo secundário (vertical quando flex-direction: row e horizontal quando flex-direction: column). Você pode usar align-items: flex-start, align-items: center ou align-items: flex-end para alinhar os elementos verticalmente dentro das colunas.

  4. gap: Essa propriedade define o espaçamento entre os itens flex. Ela pode ser utilizada para criar espaçamento entre as colunas, permitindo ajustar o espaço entre os elementos individualmente.

Aqui está um exemplo de como usar essas propriedades para alterar o espaçamento de linhas:

.container {
  display: flex;
  flex-direction: column; /* Organiza os elementos em colunas */
  justify-content: space-between; /* Espaçamento entre as colunas */
  align-items: center; /* Alinhamento vertical dos elementos dentro das colunas */
  gap: 20px; /* Espaçamento entre os elementos dentro das colunas */
}

Lembre-se de ajustar os valores das propriedades (justify-content, align-items e gap) de acordo com o espaçamento desejado para obter o layout desejado.

Espero ter ajudado! Atenciosamente

Muito obrigado Wankerson, ajudou sim, ficou bem mais claro agora