Talvez em conjunto do flex-direction? Eu realmente dei uma bugada nessa parte, poderia me ajudar por favor?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Talvez em conjunto do flex-direction? Eu realmente dei uma bugada nessa parte, poderia me ajudar por favor?
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:
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.
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.
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.
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