Em vez de ficarmos aumentando o "column-gap", não seria melhor usarmos o justify-content: space-between? Sendo que ele jogaria o primeiro e o ultimo intem para a borda?
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!
Em vez de ficarmos aumentando o "column-gap", não seria melhor usarmos o justify-content: space-between? Sendo que ele jogaria o primeiro e o ultimo intem para a borda?
Oi, Gabriel, tudo bem?
Quando você usa justify-content: space-between, os itens dentro do container flex são distribuídos de maneira que o primeiro item fique encostado na borda esquerda e o último item na borda direita, com espaço igual entre os itens restantes. Isso pode ser uma ótima solução para distribuir os itens de forma uniforme.
Por exemplo:
.menu {
display: flex;
justify-content: space-between;
}
No entanto, em alguns casos, pode ser necessário ter um controle mais preciso sobre o espaçamento entre os itens, especialmente se você precisa de um espaçamento específico que não seja uniformemente distribuído. É aí que o column-gap entra em cena. Usar column-gap permite definir um espaço fixo entre cada coluna:
.menu {
display: flex;
column-gap: 105px;
}
Como você está lidando com um layout que precisa de um espaçamento fixo e evitar que os itens se quebrem em linhas diferentes, o uso de column-gap combinado com flex-wrap: nowrap pode ser mais apropriado. Isso garante que os itens permaneçam na mesma linha e com o espaçamento exato que você deseja.
Ambas as abordagens têm seus méritos, e a escolha entre elas depende do comportamento desejado para o layout. Se a distribuição uniforme dos itens é suficiente para o seu design, justify-content: space-between pode ser uma solução mais simples. Caso contrário, column-gap oferece um controle mais preciso.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!