Control de dirección con flex-direction y flex-wrap

Cuando trabajamos con Flexbox, una de las primeras decisiones que tomamos es cómo queremos que se organicen nuestros elementos en el contenedor. Las propiedades flex-direction y flex-wrap nos permiten controlar la dirección y el comportamiento de los elementos flexibles, definiendo así el flujo principal del contenido.

Entendiendo los ejes en Flexbox

Antes de profundizar en estas propiedades, es importante comprender que Flexbox opera con dos ejes:

• El eje principal (main axis): determinado por la propiedad flex-direction
• El eje cruzado (cross axis): perpendicular al eje principal

La propiedad flex-direction

Esta propiedad establece la dirección del eje principal, determinando cómo se colocan los elementos flex dentro del contenedor.

Tiene cuatro valores posibles:

• row (valor predeterminado): elementos dispuestos en fila, de izquierda a derecha
• row-reverse: elementos dispuestos en fila, pero de derecha a izquierda
• column: elementos dispuestos en columna, de arriba hacia abajo
• column-reverse: elementos dispuestos en columna, pero de abajo hacia arriba

Veamos un ejemplo básico:

.container {
  display: flex;
  flex-direction: row; /* Valor por defecto */
}

Podemos ver cómo cambia la disposición de los elementos con diferentes valores:

/* Elementos en fila (izquierda a derecha) */
.container-row {
  display: flex;
  flex-direction: row;
}

/* Elementos en fila invertida (derecha a izquierda) */
.container-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

/* Elementos en columna (arriba a abajo) */
.container-column {
  display: flex;
  flex-direction: column;
}

/* Elementos en columna invertida (abajo a arriba) */
.container-column-reverse {
  display: flex;
  flex-direction: column-reverse;
}

Es importante destacar que cuando cambiamos la dirección a column o column-reverse, el eje principal pasa a ser vertical, lo que afecta a cómo funcionan otras propiedades de Flexbox.

La propiedad flex-wrap

Por defecto, los elementos flex intentan ajustarse en una sola línea dentro del contenedor, incluso si esto significa que se compriman. La propiedad flex-wrap controla si los elementos deben envolverse (wrap) o no cuando no caben en una sola línea.

Tiene tres valores posibles:

• nowrap (valor predeterminado): todos los elementos en una sola línea
• wrap: los elementos se envuelven en múltiples líneas si es necesario
• wrap-reverse: los elementos se envuelven en múltiples líneas en orden inverso

Veamos cómo funciona:

/* Los elementos se comprimen para caber en una línea */
.container-nowrap {
  display: flex;
  flex-wrap: nowrap;
}

/* Los elementos se envuelven en múltiples líneas si es necesario */
.container-wrap {
  display: flex;
  flex-wrap: wrap;
}

/* Los elementos se envuelven en orden inverso */
.container-wrap-reverse {
  display: flex;
  flex-wrap: wrap-reverse;
}

Un ejemplo práctico con varios elementos:

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery-item {
  width: 200px;
  height: 150px;
  background-color: #f0f0f0;
}

Con este código, los elementos de la galería se organizarán en filas y pasarán a la siguiente línea cuando no quede espacio suficiente, creando un diseño responsivo sin necesidad de media queries para casos sencillos.

Combinando flex-direction y flex-wrap

A menudo necesitamos configurar ambas propiedades. Para simplificar, CSS ofrece la propiedad abreviada flex-flow, que combina flex-direction y flex-wrap en una sola declaración.

.container {
  display: flex;
  /* Equivalente a flex-direction: row; flex-wrap: wrap; */
  flex-flow: row wrap;
}

Algunos ejemplos comunes:

/* Elementos en columna que se envuelven */
.vertical-gallery {
  display: flex;
  flex-flow: column wrap;
  height: 500px; /* Necesario para que los elementos se envuelvan en columnas */
}

/* Elementos en fila invertida sin envolverse */
.reversed-menu {
  display: flex;
  flex-flow: row-reverse nowrap;
}

Casos de uso prácticos

Menú de navegación horizontal

.nav-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
}

.nav-item {
  margin-right: 20px;
}

Galería de imágenes responsiva

.image-gallery {
  display: flex;
  flex-flow: row wrap;
  gap: 15px;
}

.gallery-item {
  flex: 0 0 calc(33.333% - 15px); /* Aproximadamente 3 elementos por fila */
}

Diseño de tarjetas en móvil vs. escritorio

.card-container {
  display: flex;
  flex-flow: column nowrap; /* Vertical en móviles */
}

@media (min-width: 768px) {
  .card-container {
    flex-flow: row wrap; /* Horizontal con wrap en escritorio */
  }
}

Consideraciones importantes

• El valor de flex-direction afecta el orden de pintura de los elementos, lo que puede ser relevante para la accesibilidad y SEO.
• Cuando usamos column o column-reverse, es importante establecer una altura al contenedor si queremos que flex-wrap: wrap funcione correctamente.
• La propiedad flex-wrap es fundamental para crear diseños responsivos con Flexbox, ya que permite que los elementos se reorganicen según el espacio disponible.

Estas propiedades de dirección y envoltura son la base para crear layouts flexibles. Una vez dominadas, podemos pasar a controlar la alineación y distribución de los elementos dentro del contenedor flex.

Alineación en el eje principal con justify-content

Una vez que hemos definido la dirección y comportamiento de nuestros elementos flex con flex-direction y flex-wrap, el siguiente paso es controlar cómo se distribuyen estos elementos a lo largo del eje principal. Para esto utilizamos la propiedad justify-content.

Esta propiedad nos permite determinar cómo el navegador distribuye el espacio disponible entre y alrededor de los elementos flex cuando estos no ocupan todo el espacio del contenedor en el eje principal.

Valores de justify-content

La propiedad justify-content acepta varios valores que nos ofrecen diferentes formas de alinear y distribuir el espacio:

• flex-start (valor predeterminado): alinea los elementos al inicio del contenedor
• flex-end: alinea los elementos al final del contenedor
• center: centra los elementos en el contenedor
• space-between: distribuye los elementos uniformemente con el primer elemento al inicio y el último al final
• space-around: distribuye el espacio uniformemente alrededor de cada elemento
• space-evenly: distribuye el espacio uniformemente entre todos los elementos, incluyendo los extremos

Veamos cómo se comporta cada uno de estos valores:

.container {
  display: flex;
  height: 150px;
  border: 2px solid #333;
  margin-bottom: 20px;
}

.flex-start {
  justify-content: flex-start;
}

.flex-end {
  justify-content: flex-end;
}

.center {
  justify-content: center;
}

.space-between {
  justify-content: space-between;
}

.space-around {
  justify-content: space-around;
}

.space-evenly {
  justify-content: space-evenly;
}

Visualizando los diferentes valores

Para entender mejor cómo funciona cada valor, imaginemos un contenedor con tres elementos:

• Con justify-content: flex-start, los elementos se agrupan al inicio del contenedor:

.menu {
  display: flex;
  justify-content: flex-start;
}

• Con justify-content: flex-end, los elementos se agrupan al final del contenedor:

.menu {
  display: flex;
  justify-content: flex-end;
}

• Con justify-content: center, los elementos se agrupan en el centro:

.hero-content {
  display: flex;
  justify-content: center;
}

Distribución del espacio

Los valores más interesantes son aquellos que distribuyen el espacio disponible:

• space-between: coloca el primer elemento al inicio, el último al final, y distribuye el espacio restante uniformemente entre los elementos:

.nav-menu {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

Este valor es ideal para barras de navegación donde queremos elementos en ambos extremos.

• space-around: distribuye el espacio de manera que cada elemento tenga la misma cantidad de espacio a su alrededor:

.gallery {
  display: flex;
  justify-content: space-around;
}

Con este valor, los elementos de los extremos tendrán la mitad del espacio en los bordes que entre los elementos.

• space-evenly: distribuye el espacio de manera uniforme entre todos los elementos, incluyendo los extremos:

.feature-icons {
  display: flex;
  justify-content: space-evenly;
}

Este valor crea una distribución visualmente equilibrada donde todos los espacios son idénticos.

Comportamiento con diferentes direcciones

Es importante recordar que justify-content siempre actúa sobre el eje principal, cuya dirección cambia según el valor de flex-direction:

• Con flex-direction: row o row-reverse, justify-content controla la alineación horizontal
• Con flex-direction: column o column-reverse, justify-content controla la alineación vertical

Veamos un ejemplo con dirección de columna:

.sidebar {
  display: flex;
  flex-direction: column;
  height: 400px;
  justify-content: space-between;
}

En este caso, los elementos de la barra lateral se distribuirán verticalmente, con el primer elemento arriba y el último abajo.

Casos de uso prácticos

Centrado perfecto horizontal

Uno de los usos más comunes de Flexbox es centrar elementos horizontalmente:

.header {
  display: flex;
  justify-content: center;
}

.logo {
  /* El logo estará perfectamente centrado */
}

Barra de navegación con logo y menú

.navbar {
  display: flex;
  justify-content: space-between;
  padding: 15px;
}

.logo {
  /* Logo a la izquierda */
}

.nav-links {
  /* Enlaces de navegación a la derecha */
  display: flex;
  gap: 20px;
}

Distribución de tarjetas de productos

.product-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.product-card {
  width: 250px;
  margin-bottom: 20px;
}

Pie de página con secciones

.footer {
  display: flex;
  justify-content: space-between;
  padding: 40px 20px;
}

.footer-section {
  flex: 1;
  margin: 0 10px;
}

Combinando justify-content con flex-wrap

Cuando usamos flex-wrap: wrap y los elementos se distribuyen en múltiples líneas, justify-content afecta a cada línea individualmente:

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery-item {
  width: 200px;
  margin: 10px;
}

En este ejemplo, cada fila de elementos de la galería estará centrada, incluso si la última fila tiene menos elementos.

Consideraciones de diseño responsivo

La propiedad justify-content es especialmente útil para crear diseños que se adapten a diferentes tamaños de pantalla:

.feature-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centrado en móviles */
}

@media (min-width: 768px) {
  .feature-section {
    justify-content: space-between; /* Distribuido en escritorio */
  }
}

Este enfoque permite que los elementos se centren en pantallas pequeñas (donde probablemente habrá uno por línea) y se distribuyan uniformemente en pantallas más grandes.

Compatibilidad con navegadores

La propiedad justify-content tiene excelente soporte en navegadores modernos. Sin embargo, para navegadores muy antiguos, podrías necesitar prefijos de proveedor o soluciones alternativas.

Dominar justify-content es fundamental para crear diseños flexibles y responsivos, ya que nos permite controlar con precisión cómo se distribuye el espacio disponible entre nuestros elementos.

Alineación en el eje cruzado con align-items y align-content

Mientras que justify-content controla la alineación en el eje principal, las propiedades align-items y align-content nos permiten controlar cómo se alinean los elementos en el eje cruzado (perpendicular al eje principal). Estas propiedades son fundamentales para lograr diseños flexibles y precisos con Flexbox.

La propiedad align-items

La propiedad align-items determina cómo los elementos flex se posicionan a lo largo del eje cruzado dentro de cada línea. Es decir, controla la alineación vertical cuando los elementos están en fila, o la alineación horizontal cuando están en columna.

Los valores principales de align-items son:

• stretch (valor predeterminado): los elementos se estiran para ocupar todo el espacio disponible en el eje cruzado
• flex-start: los elementos se alinean al inicio del eje cruzado
• flex-end: los elementos se alinean al final del eje cruzado
• center: los elementos se centran en el eje cruzado
• baseline: los elementos se alinean según la línea base de su texto

Veamos ejemplos de cada uno:

.container {
  display: flex;
  height: 200px; /* Altura definida para ver el efecto */
  border: 2px solid #333;
  margin-bottom: 20px;
}

.stretch {
  align-items: stretch;
}

.flex-start {
  align-items: flex-start;
}

.flex-end {
  align-items: flex-end;
}

.center {
  align-items: center;
}

.baseline {
  align-items: baseline;
}

Para visualizar mejor el efecto de align-items: baseline, podemos usar elementos con diferentes tamaños de texto:

.baseline-demo {
  display: flex;
  align-items: baseline;
  height: 150px;
  border: 1px solid #ddd;
}

.baseline-demo div:nth-child(1) { font-size: 14px; }
.baseline-demo div:nth-child(2) { font-size: 24px; }
.baseline-demo div:nth-child(3) { font-size: 18px; }

Con este código, los elementos se alinearán según la línea base de su texto, independientemente del tamaño de fuente.

La propiedad align-content

Mientras que align-items controla la alineación de los elementos dentro de cada línea, align-content determina cómo se distribuyen múltiples líneas de elementos flex a lo largo del eje cruzado. Esta propiedad solo tiene efecto cuando:

1. Hay múltiples líneas de elementos (es decir, cuando flex-wrap: wrap o flex-wrap: wrap-reverse)
2. Hay espacio extra en el eje cruzado

Los valores principales de align-content son:

• stretch (valor predeterminado): las líneas se estiran para ocupar todo el espacio disponible
• flex-start: las líneas se agrupan al inicio del contenedor
• flex-end: las líneas se agrupan al final del contenedor
• center: las líneas se centran en el contenedor
• space-between: las líneas se distribuyen uniformemente, con la primera al inicio y la última al final
• space-around: las líneas se distribuyen con espacio igual alrededor de cada una
• space-evenly: las líneas se distribuyen con espacio igual entre todas, incluyendo los extremos

Veamos un ejemplo con varios elementos que se envuelven en múltiples líneas:

.multi-line-container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  width: 300px;
  border: 2px solid #333;
}

.multi-line-container div {
  width: 80px;
  height: 80px;
  margin: 5px;
  background-color: #f0f0f0;
}

.stretch-content {
  align-content: stretch;
}

.flex-start-content {
  align-content: flex-start;
}

.flex-end-content {
  align-content: flex-end;
}

.center-content {
  align-content: center;
}

.space-between-content {
  align-content: space-between;
}

.space-around-content {
  align-content: space-around;
}

.space-evenly-content {
  align-content: space-evenly;
}

Diferencia clave entre align-items y align-content

Es importante entender la diferencia entre estas dos propiedades:

• align-items: controla cómo se alinean los elementos dentro de cada línea
• align-content: controla cómo se distribuyen múltiples líneas en el contenedor

Si solo tienes una línea de elementos flex (porque no hay suficientes elementos o porque flex-wrap: nowrap), align-content no tendrá ningún efecto visible.

Alineación individual con align-self

Además de align-items, que se aplica a todos los elementos dentro del contenedor, existe la propiedad align-self que permite sobrescribir la alineación para elementos individuales.

align-self acepta los mismos valores que align-items y se aplica directamente al elemento flex, no al contenedor:

.container {
  display: flex;
  align-items: center; /* Todos los elementos centrados por defecto */
  height: 200px;
}

.item-start {
  align-self: flex-start; /* Este elemento irá al inicio */
}

.item-end {
  align-self: flex-end; /* Este elemento irá al final */
}

Esta propiedad es muy útil cuando necesitamos que un elemento específico tenga una alineación diferente al resto.

Casos de uso prácticos

Centrado vertical y horizontal perfecto

Uno de los usos más populares de Flexbox es centrar elementos tanto horizontal como verticalmente:

.perfect-center {
  display: flex;
  justify-content: center; /* Centrado horizontal */
  align-items: center;     /* Centrado vertical */
  height: 300px;
}

Este patrón resuelve uno de los problemas más antiguos del diseño CSS de manera elegante y sencilla.

Tarjetas de igual altura con contenido alineado

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  width: calc(33.333% - 20px);
  border: 1px solid #ddd;
}

.card-body {
  flex: 1; /* Ocupa el espacio disponible */
}

.card-footer {
  align-self: flex-end; /* Alinea el footer al final */
  width: 100%;
  padding: 10px;
  background-color: #f5f5f5;
}

Este ejemplo crea tarjetas de igual altura donde el footer siempre está en la parte inferior, independientemente de la cantidad de contenido en el cuerpo de la tarjeta.

Menú de navegación con elementos alineados

.navbar {
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0 20px;
}

.logo {
  margin-right: auto; /* Empuja los demás elementos hacia la derecha */
}

.nav-links {
  display: flex;
  gap: 20px;
}

.user-profile {
  align-self: flex-start; /* Alinea el perfil de usuario en la parte superior */
}

Galería de imágenes con diferentes alturas

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* Las filas se agrupan arriba */
  gap: 10px;
}

.gallery-item {
  flex: 0 0 calc(25% - 10px); /* Aproximadamente 4 elementos por fila */
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

Comportamiento con diferentes direcciones

Al igual que con justify-content, es importante recordar que el eje cruzado cambia dependiendo de flex-direction:

• Con flex-direction: row o row-reverse, el eje cruzado es vertical
• Con flex-direction: column o column-reverse, el eje cruzado es horizontal

Por lo tanto, con flex-direction: column:

• align-items controlará la alineación horizontal
• align-content controlará la distribución horizontal de múltiples columnas

.vertical-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Elementos alineados a la izquierda */
  width: 200px;
}

.full-width-item {
  align-self: stretch; /* Este elemento ocupará todo el ancho */
}

Consideraciones de diseño responsivo

Las propiedades de alineación en el eje cruzado son especialmente útiles para diseños responsivos:

.feature-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* Tarjetas de igual altura */
}

@media (max-width: 768px) {
  .feature-cards {
    align-content: flex-start; /* En móviles, agrupar arriba */
  }
}

Este enfoque garantiza que los elementos se alineen de manera óptima tanto en dispositivos móviles como en escritorio.

Combinando todas las propiedades de alineación

Para lograr diseños complejos, a menudo necesitamos combinar justify-content, align-items y align-content:

.dashboard-grid {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  
  /* Distribución en el eje principal */
  justify-content: space-between;
  
  /* Alineación en cada línea */
  align-items: stretch;
  
  /* Distribución de múltiples líneas */
  align-content: flex-start;
}

Dominar estas propiedades de alineación en el eje cruzado, junto con las propiedades de alineación en el eje principal, nos proporciona un control preciso sobre la disposición de los elementos en nuestros diseños flexibles.

Espaciado entre elementos con gap, row-gap y column-gap

Una de las mejoras más significativas en el modelo de Flexbox ha sido la introducción de las propiedades gap, row-gap y column-gap. Estas propiedades nos permiten crear espaciado entre los elementos flex de manera sencilla y consistente, sin necesidad de recurrir a márgenes que pueden complicar nuestros diseños.

Entendiendo las propiedades de espaciado

Las propiedades de espaciado en Flexbox funcionan de manera similar a como lo hacen en Grid Layout, creando espacios uniformes entre elementos sin afectar los márgenes externos del contenedor:

• gap: establece el espacio entre elementos en ambas direcciones (atajo para row-gap y column-gap)
• row-gap: establece el espacio entre filas de elementos
• column-gap: establece el espacio entre columnas de elementos

Estas propiedades se aplican al contenedor flex, no a los elementos individuales.

La propiedad gap

La forma más sencilla de crear espaciado uniforme entre elementos flex es utilizando la propiedad gap:

.container {
  display: flex;
  gap: 20px; /* Espacio de 20px entre todos los elementos */
}

Este código crea un espacio de 20 píxeles entre cada elemento, tanto horizontal como verticalmente (cuando hay múltiples filas debido a flex-wrap: wrap).

Podemos ver la diferencia entre usar gap y no usarlo:

/* Sin gap - los elementos están pegados */
.container-without-gap {
  display: flex;
  flex-wrap: wrap;
}

/* Con gap - los elementos tienen espacio uniforme entre ellos */
.container-with-gap {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

Espaciado diferenciado con row-gap y column-gap

Si necesitamos un control más preciso, podemos establecer diferentes espaciados para filas y columnas:

.gallery {
  display: flex;
  flex-wrap: wrap;
  row-gap: 30px;    /* Espacio vertical entre filas */
  column-gap: 15px; /* Espacio horizontal entre columnas */
}

Este enfoque es particularmente útil cuando queremos crear diseños donde el espaciado vertical y horizontal tienen diferentes propósitos visuales:

.blog-grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: 40px;    /* Mayor espacio entre artículos */
  column-gap: 20px; /* Menor espacio entre columnas */
}

Ventajas sobre los márgenes tradicionales

Antes de la introducción de las propiedades gap, los desarrolladores tenían que recurrir a márgenes para crear espacios entre elementos flex, lo que presentaba varios problemas:

/* Enfoque antiguo con márgenes */
.old-approach .item {
  margin-right: 10px;
  margin-bottom: 10px;
}

/* Problema: los elementos del borde derecho tienen margen innecesario */
.old-approach .item:nth-child(3n) {
  margin-right: 0;
}

Las propiedades gap resuelven estos problemas:

• No crean espacios externos al contenedor
• No requieren selectores especiales para los elementos del borde
• Funcionan correctamente con flex-direction: row-reverse o column-reverse
• Se adaptan automáticamente cuando los elementos cambian de posición debido a flex-wrap

/* Enfoque moderno con gap */
.modern-approach {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Espacio uniforme entre todos los elementos */
}

Casos de uso prácticos

Menú de navegación con espaciado uniforme

.nav-menu {
  display: flex;
  gap: 20px; /* Espacio uniforme entre elementos del menú */
  padding: 15px;
}

Este código crea un menú horizontal con espaciado uniforme entre elementos, sin necesidad de preocuparse por márgenes.

Galería de imágenes responsiva

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.gallery-item {
  flex-basis: calc(33.333% - 10px); /* Ajuste para el gap */
}

@media (max-width: 768px) {
  .gallery-item {
    flex-basis: calc(50% - 7.5px); /* Ajuste para dos columnas */
  }
}

En este ejemplo, la galería mantiene un espaciado consistente independientemente del número de elementos por fila.

Formulario con campos agrupados

.form-group {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 15px;
}

.form-field {
  flex: 1 1 200px; /* Base de 200px, pero puede crecer y encogerse */
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

Este diseño crea un formulario con campos que se adaptan al espacio disponible, manteniendo un espaciado consistente.

Tarjetas de productos con diferentes espaciados

.product-grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: 40px;    /* Mayor espacio vertical entre filas de productos */
  column-gap: 20px; /* Menor espacio horizontal entre productos */
}

.product-card {
  flex: 0 0 calc(25% - 15px); /* Aproximadamente 4 productos por fila */
}

Combinando gap con otras propiedades de Flexbox

Las propiedades gap funcionan perfectamente con otras propiedades de alineación y distribución:

.feature-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Distribuye elementos en el eje principal */
  align-items: stretch;          /* Estira elementos en el eje cruzado */
  gap: 30px;                     /* Espacio uniforme entre elementos */
}

En este caso, justify-content: space-between distribuye los elementos en el eje principal, mientras que gap: 30px asegura que haya al menos 30px de espacio entre ellos.

Consideraciones de compatibilidad

Las propiedades gap para Flexbox tienen buen soporte en navegadores modernos, pero pueden no funcionar en navegadores muy antiguos. Para mayor compatibilidad, podemos usar una estrategia de mejora progresiva:

.container {
  display: flex;
  flex-wrap: wrap;
  
  /* Fallback para navegadores antiguos */
  margin: -10px;
}

.container > * {
  /* Fallback para navegadores antiguos */
  margin: 10px;
}

@supports (gap: 20px) {
  .container {
    gap: 20px;
    margin: 0;
  }
  
  .container > * {
    margin: 0;
  }
}

Cálculo de tamaños con gap

Cuando usamos gap junto con porcentajes o cálculos para los tamaños de los elementos, debemos tener en cuenta el espacio que ocupará el gap:

.three-column-layout {
  display: flex;
  gap: 20px;
}

.column {
  /* Sin gap, sería width: 33.333% */
  width: calc((100% - 40px) / 3); /* 40px = 20px gap × 2 espacios */
}

Sin embargo, con Flexbox podemos simplificar esto usando flex:

.three-column-layout {
  display: flex;
  gap: 20px;
}

.column {
  flex: 1; /* Cada columna ocupa el mismo espacio disponible */
}

Con este enfoque, Flexbox se encarga automáticamente de calcular el ancho de cada columna teniendo en cuenta el espacio ocupado por los gaps.

Anidación de contenedores con gap

Cuando anidamos contenedores flex, cada uno puede tener su propio valor de gap:

.outer-container {
  display: flex;
  gap: 30px;
}

.inner-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

Este patrón es útil para crear diseños complejos con diferentes niveles de espaciado.

Las propiedades gap, row-gap y column-gap han simplificado enormemente la creación de diseños flexibles con espaciado uniforme. Al eliminar la necesidad de márgenes complejos, estas propiedades nos permiten crear layouts más limpios, mantenibles y adaptables a diferentes tamaños de pantalla.