Coloquei : .container { display: flex; flex-direction: column; gap: 50px; }
No lugar de space-bet, como é visto isso no mercado de trabalho e se é melhor do jeito de vocês?
Coloquei : .container { display: flex; flex-direction: column; gap: 50px; }
No lugar de space-bet, como é visto isso no mercado de trabalho e se é melhor do jeito de vocês?
Olá, Lukas, como vai?
Tanto o gap
quanto o space-between
são propriedades usadas para criar espaçamentos entre elementos em um container flex
, mas funcionam de formas diferentes e têm usos complementares no mercado.
O gap
define um espaço fixo entre os itens do container, independente da quantidade de elementos ou do tamanho do container. Por exemplo:
.container {
display: flex;
flex-direction: column;
gap: 50px;
}
Isso garante que sempre haverá 50px entre cada item, mantendo o espaçamento consistente.
Já o justify-content: space-between
distribui o espaço restante do container entre os itens, colocando o primeiro item no início e o último no final, com os demais espaçados igualmente entre eles. Por exemplo:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 300px;
}
Nesse caso, o espaço entre os itens pode variar conforme o tamanho do container.
No mercado, é comum utilizar gap
para espaçamentos previsíveis, principalmente em layouts mais controlados. O space-between
é mais utilizado quando se deseja ocupar todo o espaço disponível de forma dinâmica.
Espero ter ajudado.
Siga firme nos seus estudos e conte com o fórum sempre que precisar.
Abraços :)