Flexbox: Sistema de diseño flexible en CSS

Flexbox (Flexible Box Layout) es uno de los sistemas de diseño más importantes en CSS moderno. Este módulo de especificación CSS proporciona una forma eficiente de organizar, distribuir y alinear elementos dentro de un contenedor, incluso cuando su tamaño es desconocido o dinámico.

La flexibilidad que ofrece Flexbox ha revolucionado la manera en que los desarrolladores abordan el diseño web. Antes de su llegada, crear layouts complejos requería técnicas complicadas con floats, positioning o display table. Flexbox simplifica estas tareas y ofrece un control preciso sobre la disposición de los elementos.

Conceptos fundamentales

El sistema Flexbox se basa en dos componentes principales: el contenedor flex (flex container) y los elementos flex (flex items). El contenedor es el elemento padre que define el contexto flexible, mientras que los elementos flex son sus hijos directos.

.container {
  display: flex;
}

Al aplicar display: flex a un elemento, este se convierte automáticamente en un contenedor flex, y todos sus hijos directos se transforman en elementos flex. Esta transformación activa el comportamiento flexible y permite utilizar todas las propiedades específicas de Flexbox.

Ejes y direcciones

Flexbox opera sobre dos ejes principales: el eje principal (main axis) y el eje transversal (cross axis). Por defecto, el eje principal es horizontal (de izquierda a derecha) y el eje transversal es vertical (de arriba a abajo).

La propiedad flex-direction controla la dirección del eje principal:

.container {
  display: flex;
  flex-direction: row; /* Horizontal, valor por defecto */
}

.container-column {
  display: flex;
  flex-direction: column; /* Vertical */
}

También existen las variantes row-reverse y column-reverse que invierten el orden de los elementos:

.container-reverse {
  display: flex;
  flex-direction: row-reverse; /* De derecha a izquierda */
}

Distribución y alineación

Una de las ventajas principales de Flexbox es su capacidad para distribuir y alinear elementos de manera intuitiva. La propiedad justify-content controla la alineación a lo largo del eje principal:

.container {
  display: flex;
  justify-content: center; /* Centra los elementos */
}

.container-space {
  display: flex;
  justify-content: space-between; /* Distribuye con espacio entre elementos */
}

Los valores más utilizados incluyen:

• flex-start: Alinea al inicio del contenedor
• flex-end: Alinea al final del contenedor
• center: Centra los elementos
• space-between: Distribuye con espacio igual entre elementos
• space-around: Distribuye con espacio igual alrededor de cada elemento

Para la alineación transversal, utilizamos align-items:

.container {
  display: flex;
  align-items: center; /* Centra verticalmente */
  min-height: 200px;
}

Flexibilidad de elementos

Los elementos flex pueden crecer, encogerse y establecer su tamaño base mediante las propiedades flex-grow, flex-shrink y flex-basis. La propiedad abreviada flex combina estas tres:

.item {
  flex: 1; /* Equivale a flex: 1 1 0% */
}

.item-fixed {
  flex: 0 0 200px; /* No crece, no se encoge, tamaño fijo 200px */
}

El primer valor (flex-grow) define cuánto puede crecer el elemento. Un valor de 1 significa que el elemento ocupará el espacio disponible proporcionalmente:

.item-grow {
  flex-grow: 2; /* Crecerá el doble que elementos con flex-grow: 1 */
}

Ajuste de líneas

Por defecto, los elementos flex intentan caber en una sola línea. La propiedad flex-wrap permite que los elementos se ajusten a nuevas líneas cuando sea necesario:

.container {
  display: flex;
  flex-wrap: wrap; /* Permite salto de línea */
}

.container-nowrap {
  display: flex;
  flex-wrap: nowrap; /* Valor por defecto, una sola línea */
}

La propiedad abreviada flex-flow combina flex-direction y flex-wrap:

.container {
  display: flex;
  flex-flow: row wrap; /* Dirección horizontal con ajuste de línea */
}

Alineación individual

Mientras que align-items afecta a todos los elementos flex, align-self permite controlar la alineación de elementos individuales:

.item-special {
  align-self: flex-end; /* Solo este elemento se alinea al final */
}

.item-center {
  align-self: center; /* Solo este elemento se centra */
}

Esta flexibilidad individual es especialmente útil cuando necesitamos que un elemento específico tenga un comportamiento diferente al resto del contenedor.

Espaciado y gaps

CSS moderno incluye la propiedad gap para controlar el espaciado entre elementos flex de manera más directa:

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

.container-custom {
  display: flex;
  row-gap: 15px; /* Espacio vertical */
  column-gap: 25px; /* Espacio horizontal */
}

Esta aproximación es más limpia y mantenible que utilizar márgenes en los elementos individuales, ya que no requiere selectores complejos para evitar márgenes no deseados en los bordes.