Flexbox | Huecos | propiedades row‑gap, column‑gap y gap
Las propiedades row‑gap y columns‑gap permiten establecer el tamaño de un «hueco» entre ítems desde el elemento padre contenedor sin necesidad de utilizar padding o margin en los elementos hijos.
Sólo una de las dos propiedades tendrá efecto, dependiendo de si la propiedad flex-direction está establecida en column o en row. Sin embargo, es posible usar ambas si tenemos la propiedad flex-wrap definida a wrap y, por lo tanto, disponemos de multicolumnas flexbox.
La propiedad gap es de tipo short-hand. Con dos parámetros equivale a row‑gap y columns‑gap. La propiedad gap con un valor equivale a ajustar el mismo gap a las filas y las columnas.
CASO 1Propiedad column‑gap
1
2
3
4
CASO 2Propiedad row‑gap
1
2
3
4
CASO 3Propiedades row‑gap y columns‑gap
1
2
3
4
5
6
7
8
9
10
11
12
CASO 4Propiedades gap
1
2
3
4
5
6
7
8
9
10
11
12