A todas las propiedades existentes para Flexbox, se unieron dos nuevas de manera reciente, row-gap y column-gap, las cuales, permiten establecer el tamaño de un «hueco» entre ítems desde el elemento padre contenedor, y sin necesidad de estar utilizando padding o margin en los elementos hijos.
| Propiedad | Valor | Descripción |
|---|---|---|
row-gap |
normal | | Espacio entre filas (sólo si flex-direction: column) |
column-gap |
normal | | Espacio entre columnas (sólo si flex-direction: row) |
Nota: sólo una de las dos propiedades tendrá efecto, dependiendo de si la propiedad
flex-directionestá establecida encolumno enrow. Eso sí, es posible usar ambas si tenemos la propiedadflex-wrapdefinida awrapy, por lo tanto, disponemos de multicolumnas flexbox.
Atajo: gap
Tenemos un atajo, que podemos usar de la siguiente manera.
| Propiedad | Valor | Descripción |
|---|---|---|
gap |
0 | | Aplica el tamaño indicado para el hueco en ambos ejes. |
gap |
0 0 | | Aplica los tamaños indicados para el hueco del eje X y el eje Y. |
Veamos un ejm para entender su funcionamiento.
Ejm
.container {
/* gap: <row> <column> */
gap: 4px 8px;
/* 1 parámetro: usa el mismo para ambos */
gap: 4px;
}