Generador de CSS Flexbox
Herramienta gratuita para experimentar con diseños Flexbox ajustando flex-direction, justify-content, align-items, flex-wrap y gap con una vista previa en tiempo real. Copia el código CSS generado con un clic.
Consejos
- justify-content alinea los elementos a lo largo del "eje principal", mientras que align-items lo hace en el "eje transversal". Al cambiar flex-direction a column, el eje principal pasa a ser vertical, por lo que el efecto visual de estas dos propiedades se invierte.
- El preset "Centrado" combina justify-content: center con align-items: center, la forma más habitual de centrar un elemento tanto horizontal como verticalmente con Flexbox.
- La propiedad gap solo añade espacio entre los elementos, no alrededor del contenedor, así que a diferencia de margin crea un espaciado uniforme entre elementos hermanos sin afectar los bordes.
- Definir align-self en un solo elemento anula el align-items del contenedor únicamente para ese elemento, útil cuando quieres que uno destaque con una alineación distinta al resto.
- Activar flex-wrap: wrap permite que los elementos que ya no caben en el ancho del contenedor (o el alto, en modo columna) pasen automáticamente a la siguiente línea, una técnica habitual en diseños de tarjetas responsivos.
Preguntas frecuentes
A propósito — Cómo Flexbox cambió la historia del diseño en CSS
Antes de la llegada de CSS Flexbox (formalmente CSS Flexible Box Layout Module), los diseños horizontales en la web se construían habitualmente con la propiedad float. Pero float fue diseñada originalmente para que el texto rodeara una imagen, no para crear diseños, por lo que usarla con ese fin requería muchas soluciones alternativas, entre las que destaca el truco "clearfix" para evitar que se colapsara la altura del elemento padre.
Flexbox, cuyo primer borrador publicó el W3C en 2009, se diseñó específicamente para diseños unidimensionales. Tareas que antes requerían varias líneas de trucos CSS con float —estirar elementos a lo largo del eje principal, repartir el espacio de forma uniforme o centrar contenido verticalmente— podían ahora expresarse con una sola propiedad declarativa como justify-content o align-items.
Cuando los principales navegadores completaron su implementación de Flexbox hacia 2015, se convirtió rápidamente en la forma estándar de crear patrones habituales del diseño web, como barras de navegación, diseños de tarjetas y alineación de formularios. En aquel momento, la comunidad de desarrolladores front-end acogió especialmente bien el hecho de que el centrado vertical, considerado durante mucho tiempo uno de los problemas más complicados de CSS, por fin tuviera una solución sencilla.
Hoy en día, Flexbox convive con CSS Grid, especializado en diseños bidimensionales, cada uno con un papel distinto: Flexbox para distribuir componentes a lo largo de una sola dirección, y Grid para estructurar la página completa como una cuadrícula.