É possível aplicar column-gap em no modelo flexbox? Que eu saiba ela só funciona se o elemento-pai for display grid.
Solucionado
É possível aplicar column-gap em no modelo flexbox? Que eu saiba ela só funciona se o elemento-pai for display grid.
Oii Pedro, tudo bem?
É possível sim, aplicar a propriedade column-gap (ou apenas gap) em elementos flexbox. A propriedade gap (que inclui column-gap e row-gap) foi estendida para funcionar com flex containers também.
Isso quer dizer que você pode usar gap para definir espaços entre itens em um contêiner flex, tanto na direção das colunas quanto das linhas.
Um exemplo como usar column-gap em um container flex:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplinho de Column Gap no Flexbox</title>
<style>
.container {
display: flex;
column-gap: 20px;
/* Espaço entre colunas */
row-gap: 10px;
/* Espaço entre linhas, se houver wrap */
flex-wrap: wrap;
/* Para permitir quebra de linha dos itens */
}
.item {
background-color: lightblue;
padding: 20px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Box 1</div>
<div class="item">Box 2</div>
<div class="item">Box 3</div>
<div class="item">Box 4</div>
</div>
</body>
</html>
O container flex tem um column-gap de 20px e um row-gap de 10px. Os itens dentro do container vão ter esses espaços aplicados entre eles.
Ah, é importante dizer que para que o row-gap funcione, o container flex precisa ter flex-wrap: wrap definido, permitindo que os itens quebrem para a próxima linha quando não houver espaço suficiente em uma única linha.
Então, a utilização de gap, column-gap e row-gap é totalmente suportada em flexbox e é muito útil para gerenciar espaçamentos de forma mais eficiente e consistente.
Aqui tem o exemplo no CodePen pra você ter uma visualização melhor.
Espero ter te ajudado.
Um abraço e bons estudos.