1
resposta

[Dúvida] Space-bet ou gap?

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?

1 resposta

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 :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado