CSS FlexBox: Diseño avanzado desde cero

En el diseño web moderno, la necesidad de crear interfaces flexibles y adaptables a distintos dispositivos es fundamental. CSS Flexbox (Flexible Box) es un módulo diseñado para proporcionar una manera eficiente de distribuir espacio y alinear elementos dentro de un contenedor, incluso cuando sus dimensiones son dinámicas o desconocidas.

A diferencia de los modelos de diseño tradicionales como el modelo de caja en bloque (block) o en línea (inline), Flexbox permite modificar el tamaño, orden y alineación de los elementos de manera flexible, adaptándose a diferentes pantallas y orientaciones.

Su principal ventaja es que no está restringido a una sola dirección, lo que lo hace ideal para diseños complejos y aplicaciones con necesidades dinámicas.

Aunque Flexbox es una herramienta poderosa para diseños a pequeña escala, como la distribución de elementos dentro de un componente, es importante mencionar que para diseños de mayor escala, CSS Grid suele ser una mejor opción.

¿Quieres dominar CSS Grid y mejorar tus diseños?

Si aún te cuesta organizar elementos en CSS, Grid es la clave para crear estructuras flexibles y ordenadas sin complicaciones.

CSS Grid: La guía completa para principiantes y avanzados

¿Qué es Flexbox?

Flexbox es un módulo de diseño en CSS que permite distribuir el espacio entre los elementos de un contenedor de manera eficiente, permitiendo que estos se expandan o contraigan según sea necesario.

Su funcionamiento se basa en la definición de un "contenedor flexible" que administra la colocación y el tamaño de los elementos hijos.

El modelo de Flexbox facilita tareas comunes en diseño web, como:

• Centrando elementos vertical y horizontalmente.

• Creando diseños responsivos sin necesidad de utilizar float o position.

• Ajustando el orden de los elementos sin modificar el código HTML.

• Distribuyendo espacio de manera equitativa o priorizando ciertos elementos dentro de un contenedor.

Este módulo introduce conceptos clave como el eje principal y el eje transversal, que definen la dirección en la que los elementos se distribuyen dentro del contenedor, permitiendo una mayor flexibilidad en el diseño.

Conceptos básicos y terminología

Flexbox no es solo una propiedad, sino un módulo completo con múltiples características y propiedades. Algunas de estas propiedades se aplican al contenedor principal (llamado "contenedor flexible"), mientras que otras afectan a los elementos hijos (llamados "elementos flexibles").

A diferencia de los diseños tradicionales basados en los flujos de bloque y en línea, Flexbox introduce un sistema basado en "direcciones de flujo flexible" (flex-flow directions), lo que permite una disposición más versátil de los elementos dentro del contenedor.

Para comprender cómo funciona, es clave conocer los siguientes conceptos:

Eje principal y eje transversal

• Eje principal (main axis): Es la dirección en la que los elementos flexibles se distribuyen dentro del contenedor. Su orientación depende de la propiedad flex-direction, por lo que puede ser horizontal o vertical.

• Inicio y fin del eje principal (main-start | main-end): Los elementos se posicionan en el contenedor comenzando desde el main-start y extendiéndose hacia main-end.

• Tamaño principal (main size): Hace referencia al ancho o alto de un elemento, dependiendo de la orientación del eje principal. Este tamaño es determinado por las propiedades width o height según corresponda.

Eje transversal

• Eje transversal (cross axis): Es el eje perpendicular al eje principal y su dirección se define según la orientación del eje principal.

• Inicio y fin del eje transversal (cross-start | cross-end): Los elementos se organizan en líneas dentro del contenedor comenzando en cross-start y extendiéndose hacia cross-end.

• Tamaño transversal (cross size): Hace referencia al ancho o alto de un elemento en la dimensión transversal. Se determina por las propiedades width o height según la orientación del eje.

Para ilustrar mejor estos conceptos, aquí tienes una imagen explicativa:

Imagen tomada de css-tricks.com.

Comprender estos conceptos es clave para dominar Flexbox, ya que permiten una mejor organización y control del diseño adaptable.

Propiedades del contenedor Flexible (Flex Container)

Imagen tomada de css-tricks.com

En Flexbox, el contenedor flexible es el elemento padre que define el contexto en el que los elementos hijos se distribuyen y alinean.

A continuación, te explico las principales propiedades aplicables al contenedor:

display

Define un contenedor flexible, permitiendo que todos sus elementos directos se conviertan en elementos flexibles. Puede adoptar los valores:

.container {
  display: flex; /* Contenedor de bloque flexible */
  display: inline-flex; /* Contenedor de línea flexible */
}

Es importante destacar que las columnas de CSS (column-count, column-width) no afectan a un contenedor flexible.

flex-direction

Establece el eje principal y la dirección en la que se organizan los elementos flexibles dentro del contenedor. Flexbox es un modelo de diseño unidireccional, por lo que los elementos pueden distribuirse en filas o columnas.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

Los valores posibles son:

• row (por defecto): Organiza los elementos de izquierda a derecha en idiomas con escritura de izquierda a derecha (ltr) y de derecha a izquierda en idiomas con escritura de derecha a izquierda (rtl).

• row-reverse: Invierte la dirección de row.

• column: Organiza los elementos en una columna de arriba hacia abajo.

• column-reverse: Invierte la dirección de column, de abajo hacia arriba.

Ejemplo:
https://codepen.io/johnserranodev/pen/JojyJOg

flex-wrap

Determina si los elementos flexibles deben ajustarse dentro del contenedor o si pueden desbordarse a una nueva línea.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (por defecto): Todos los elementos se mantienen en una sola línea.

• wrap: Los elementos se ajustan a múltiples líneas si es necesario.

• wrap-reverse: Similar a wrap, pero invierte el orden de las líneas.

Ejemplo:
https://codepen.io/johnserranodev/pen/XJWaaYd

flex-flow

Es una propiedad abreviada para flex-direction y flex-wrap, que define el eje principal y el ajuste de los elementos.

.container {
  flex-flow: row nowrap;
}

justify-content

Controla la alineación de los elementos a lo largo del eje principal.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• flex-start (por defecto): Alinea los elementos al inicio del contenedor.

• flex-end: Alinea los elementos al final del contenedor.

• center: Centra los elementos dentro del contenedor.

• space-between: Distribuye los elementos con espacio igual entre ellos.

• space-around: Agrega espacio antes y después de cada elemento.

• space-evenly: Distribuye el espacio de manera uniforme entre los elementos.

Ejemplo:
https://codepen.io/johnserranodev/pen/xbxLLaq?editors=1100

align-items

Define cómo se alinean los elementos en el eje transversal.

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start: Alinea los elementos al inicio del eje transversal.

• flex-end: Alinea los elementos al final del eje transversal.

• center: Centra los elementos en el eje transversal.

• baseline: Alinea los elementos según su línea base de texto.

• stretch (por defecto): Hace que los elementos ocupen todo el espacio disponible en el eje transversal.

Ejemplo:
https://codepen.io/johnserranodev/pen/WbNEEYq?editors=1100

gap, row-gap, column-gap

Define el espacio entre los elementos flexibles dentro del contenedor.

.container {
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 15px;
}

Funciona como un margen mínimo entre elementos, sin afectar los bordes externos.

Ejemplo:
https://codepen.io/johnserranodev/pen/bNGrrZy?editors=1100

Te invito a leer este otro artículo donde te enseño las últimas novedades de Tailwind CSS

Tailwind CSS 4: Todas las novedades y cómo configurarlo paso a paso

Propiedades de los elementos Flexibles (Flex Items)

Imagen tomada de css-tricks.com

order

De forma predeterminada, los elementos flexibles se disponen en el orden de origen. Sin embargo, la propiedad de order controla el orden en el que aparecen en el contenedor flexible.

.item {
  order: 5; /* valor por defecto es 0 */
}

flex-grow

Esta propiedad define la capacidad de un elemento flexible para expandirse dentro del contenedor cuando hay espacio disponible. Se expresa con un valor numérico sin unidad, que funciona como un factor de proporción.

El valor indica qué parte del espacio libre debe ocupar el elemento en relación con los demás. Si todos los elementos tienen flex-grow: 1;, el espacio sobrante se distribuirá de manera equitativa entre ellos. Sin embargo, si un elemento tiene flex-grow: 2;, intentará ocupar el doble de espacio en comparación con los demás.

.item {
  flex-grow: 4; /* Valor por defecto: 0 */
}

Es importante destacar que los valores negativos no son válidos.

Ejemplo, order y flex-grow:
https://codepen.io/johnserranodev/pen/VYwzzNX?editors=1100

flex-shrink

Esta propiedad determina la capacidad de un elemento flexible para reducir su tamaño si es necesario. Funciona con un valor numérico sin unidad que indica la proporción en la que el elemento puede encogerse en comparación con los demás.

Si todos los elementos tienen flex-shrink: 1;, se reducirán de manera uniforme cuando el espacio sea insuficiente. Si un elemento tiene un valor mayor, se encogerá más rápido que los demás.

.item {
  flex-shrink: 3; /* Valor por defecto: 1 */
}

Es importante destacar que los valores negativos no son válidos.

Ver todos los detalles y ejemplos 🔥

Si quieres aprender más sobre CSS Grid con ejemplos prácticos, puedes leer el artículo completo aquí 👉 CSS FlexBox: Diseño avanzado desde cero.

Puedes ver todos los ejemplos completos acá:
https://codepen.io/collection/kkkdGZ

Conclusiones

Flexbox es una herramienta poderosa y esencial en el diseño web moderno, ya que permite distribuir y alinear elementos de manera eficiente dentro de un contenedor flexible.

Su versatilidad lo convierte en una excelente opción para crear interfaces responsivas sin necesidad de recurrir a técnicas más complejas como float o position.

Algunos puntos clave que podemos destacar sobre Flexbox son:

1. Control total sobre el diseño: Permite organizar los elementos en una dirección específica (horizontal o vertical), definir el tamaño de cada uno y ajustar su alineación con facilidad.

2. Distribución eficiente del espacio: Gracias a propiedades como justify-content, align-items y gap, es posible lograr diseños equilibrados y bien estructurados sin necesidad de hacks o márgenes negativos.

3. Orden dinámico de los elementos: Con la propiedad order, podemos cambiar la posición visual de los elementos sin modificar el HTML, lo que facilita la flexibilidad en la disposición de los componentes.

4. Adaptabilidad y responsividad: Al permitir que los elementos crezcan (flex-grow), se encojan (flex-shrink) o tengan un tamaño base (flex-basis), Flexbox ayuda a crear interfaces que se ajustan a distintos tamaños de pantalla de forma fluida.

5. Combinación con otras herramientas: Aunque Flexbox es ideal para la disposición de elementos en una dimensión (fila o columna), en diseños más complejos puede complementarse con CSS Grid para obtener un control total sobre la disposición del contenido.

En conclusión, Flexbox es una técnica fundamental para cualquier desarrollador web, ya que simplifica la creación de diseños flexibles, adaptables y modernos con menos código y mayor eficiencia.

Te invito a visitar mi blog, donde encontrarás más contenido sobre JavaScript, React, CSS, IA, buenas prácticas y mucho más. 👉 johnserrano.co/blog ¡No te lo pierdas!

Gracias por leer. ❤️