¿Qué hace flex-wrap?

flex-wrap controla si los elementos flex permanecen en una sola línea o se envuelven en múltiples líneas cuando no hay suficiente espacio. El valor predeterminado nowrap obliga a los elementos a estar en una sola línea y puede encogerlos. wrap permite que los elementos fluyan hacia nuevas líneas, mientras que wrap-reverse los envuelve en orden inverso.

Laboratorio CSS Flexbox

Q: ¿Cuál es la diferencia entre justify-content y align-items?

justify-content controla la alineación a lo largo del eje principal (horizontal por defecto), mientras que align-items controla la alineación a lo largo del eje transversal (vertical por defecto). Cuando cambias flex-direction a column, los ejes se intercambian: justify-content se vuelve vertical y align-items se vuelve horizontal.

Q: ¿Cuál es la diferencia entre flex-grow, flex-shrink y flex-basis?

flex-basis establece el tamaño inicial de un elemento antes de que se distribuya el espacio libre. flex-grow define cuánto espacio extra debe absorber un elemento en relación con otros elementos (0 significa no crecer). flex-shrink define cuánto debe encogerse un elemento cuando no hay suficiente espacio (0 significa no encogerse). La abreviatura flex: 1 1 auto establece las tres propiedades a la vez.

Q: ¿Cuándo debo usar Flexbox frente a Grid?

Usa Flexbox para diseños unidimensionales donde los elementos fluyen en una sola dirección (una fila de botones, una barra de navegación, una lista de tarjetas en una línea). Usa CSS Grid para diseños bidimensionales donde necesites controlar tanto filas como columnas simultáneamente (diseños de página completa, galerías de imágenes, tableros). Ambos son complementarios, no compiten entre sí; muchos diseños reales combinan ambos.

Laboratorio interactivo de CSS Flexbox con vista previa visual en vivo, controles por elemento, ajustes preestablecidos de diseño del mundo real (Santo Grial, Cuadrícula de Tarjetas, Barra de Navegación, Modal) y exportación de CSS con un solo clic. Aprenda flex-direction, justify-content, align-items, gap y más experimentando en tiempo real.

Laboratorio CSS Flexbox

⚡ Diseños de inicio rápido (haz clic para cargar)

▦ Vista previa en vivo

→ eje principal ↓ eje transversal 0 elementos tip: clic en elemento para editar

⚙ Contenedor (.flex-container)

flex-direction ?

flex-wrap ?

justify-content ?

align-items ?

align-content ?

gap 8px

8px

✦ Elemento seleccionado (.flex-item)

Haz clic en un elemento de la vista previa para editar sus propiedades.

📖 Acordeón de referencia rápida — patrones comunes

▼

Quiero...	Usa esto
Centrar un elemento perfectamente	`justify-content: center; align-items: center`
Columnas de igual ancho	`flex: 1` en cada elemento
Empujar un elemento a la derecha	`margin-left: auto` en ese elemento
Envolver tarjetas en pantallas pequeñas	`flex-wrap: wrap` + `flex: 1 1 240px`
Invertir el orden en móvil	`flex-direction: row-reverse` en media query
Pie fijo en la base del viewport	body: `display: flex; flex-direction: column; min-height: 100vh`
Espacio uniforme entre elementos	`justify-content: space-between`
No encoger un elemento	`flex-shrink: 0` en él

CSS Generado

HTML Generado

Embed Laboratorio CSS Flexbox Widget

Laboratorio CSS Flexbox

El Laboratorio CSS Flexbox es un entorno de aprendizaje interactivo y generador de código para el moderno módulo CSS Flexible Box Layout. Ajusta las propiedades del contenedor (flex-direction, justify-content, align-items, gap) y las propiedades por elemento (flex-grow, flex-shrink, flex-basis, align-self, order) y observa cómo se actualiza tu diseño en tiempo real. Cuando tengas algo que te guste, copia el CSS y HTML listos para pegar directamente en tu proyecto.

¿Qué es CSS Flexbox?

CSS Flexbox (Flexible Box Layout) es un modelo de diseño unidimensional diseñado para distribuir espacio a lo largo de un solo eje (una fila o una columna) y alinear elementos dentro de un contenedor. Reemplaza técnicas antiguas como flotaciones (floats) y trucos de inline-block para barras de navegación, filas de tarjetas, contenido centrado y cualquier interfaz donde los elementos deban adaptarse de forma natural a su contenedor. A diferencia de CSS Grid, que es bidimensional, Flexbox destaca en disposiciones más simples donde controlas la alineación en una sola dirección a la vez.

Cómo usar este laboratorio

Elige un ajuste preestablecido (opcional): Selecciona Santo Grial, Cuadrícula de Tarjetas, Barra de Navegación, Hero, Modal o Pie de Página Fijo para cargar un punto de partida del mundo real. Cada ajuste es un diseño completo que puedes estudiar o modificar.
Ajusta las propiedades del contenedor: Usa los controles segmentados en el panel derecho para configurar flex-direction, flex-wrap, justify-content, align-items, align-content y gap. El escenario visual se actualiza inmediatamente.
Edita elementos individuales: Haz clic en cualquier elemento de la vista previa para seleccionarlo. Sobrescribe su order, flex-grow, flex-shrink, flex-basis y align-self independientemente del resto. Los elementos con sobrescrituras se marcan con una pequeña insignia.
Añade o elimina elementos: Usa Añadir Elemento y Eliminar Seleccionado para cambiar la cantidad de elementos y ver cómo responde el diseño.
Copia el código: La sección de Código Generado en la parte inferior siempre refleja tu diseño actual. Copia CSS, HTML o ambos con un solo clic.

Referencia de propiedades del contenedor

El contenedor flex es el elemento padre con display: flex. Estas propiedades controlan cómo se comportan todos sus hijos en conjunto.

Propiedad	Valores	Efecto
`flex-direction`	`row` · `row-reverse` · `column` · `column-reverse`	Establece la dirección del eje principal. `row` organiza los elementos de izquierda a derecha (por defecto); `column` los apila verticalmente.
`flex-wrap`	`nowrap` · `wrap` · `wrap-reverse`	Controla si los elementos permanecen en una línea o se envuelven en varias líneas cuando se agota el espacio.
`justify-content`	`flex-start` · `center` · `flex-end` · `space-between` · `space-around` · `space-evenly`	Alinea los elementos a lo largo del eje principal. Distribuye el espacio libre a los lados o entre los elementos.
`align-items`	`stretch` · `flex-start` · `center` · `flex-end` · `baseline`	Alinea los elementos a lo largo del eje transversal (perpendicular al eje principal).
`align-content`	`stretch` · `flex-start` · `center` · `flex-end` · `space-between` · `space-around`	Alinea las líneas envueltas a lo largo del eje transversal. Solo surte efecto cuando los elementos se envuelven en varias líneas.
`gap`	longitud, ej. `8px`, `1rem`	Establece el canal (gutter) entre elementos flex. Reemplaza el antiguo patrón de espaciado basado en `margin`.

Referencia de propiedades de los elementos

Estas propiedades se aplican a los elementos flex individuales (hijos de un contenedor flex) y sobrescriben los valores predeterminados del contenedor solo para ese elemento.

Propiedad	Valores	Efecto
`order`	entero (defecto `0`)	Reordena los elementos visualmente sin cambiar el HTML. Los números más bajos se renderizan primero; los valores negativos mueven los elementos al inicio.
`flex-grow`	número (defecto `0`)	Define cuánto espacio libre del contenedor debe absorber este elemento en relación con sus hermanos. `1` en cada elemento divide el espacio por igual.
`flex-shrink`	número (defecto `1`)	Define cuánto puede encogerse un elemento cuando no hay suficiente espacio. `0` significa no encogerse nunca: el elemento mantiene su tamaño declarado.
`flex-basis`	`auto` · longitud · porcentaje	Establece el tamaño inicial de un elemento antes de distribuir el espacio libre. Establece efectivamente el tamaño "ideal" del eje principal del elemento.
`align-self`	`auto` · igual que `align-items`	Sobrescribe el `align-items` del contenedor para un solo elemento.

¿Cuál es la diferencia entre justify-content y align-items?

justify-content controla la alineación a lo largo del eje principal, mientras que align-items controla la alineación a lo largo del eje transversal. El eje principal es cualquier dirección que establezca flex-direction: horizontal para row, vertical para column. Cuando cambias flex-direction de row a column, los dos ejes se intercambian, por lo que justify-content se vuelve vertical y align-items horizontal. Este intercambio es una de las fuentes más comunes de confusión cuando se aprende Flexbox; los indicadores de eje del laboratorio debajo de la vista previa ayudan a hacerlo visible.

¿Cómo centro un elemento con Flexbox?

Para centrar un solo elemento tanto horizontal como verticalmente:

Tres líneas:
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */

Este es el reemplazo moderno para los antiguos trucos de centrado que utilizaban margin: auto, transform: translate(-50%, -50%) o position: absolute. Pruébalo en el laboratorio seleccionando el ajuste preestablecido Modal Centrado.

Explicación de los ajustes de diseño reales

Diseño Santo Grial

El clásico diseño de página de tres columnas: barra lateral izquierda, contenido principal, barra lateral derecha, con encabezado y pie de página. Históricamente muy difícil de construir con flotaciones; Flexbox lo hace trivial. La columna central utiliza flex: 1 para absorber todo el espacio horizontal restante mientras las columnas laterales mantienen sus anchos declarados.

Cuadrícula de Tarjetas

Una fila de tarjetas con envoltura que fluyen hacia nuevas líneas a medida que el viewport se estrecha. Utiliza flex-wrap: wrap con cada tarjeta configurada con flex: 1 1 240px, lo que significa que la tarjeta crece y se encoge pero nunca se vuelve más estrecha que 240px.

Barra de Navegación

Una barra de navegación horizontal con un logotipo a la izquierda y enlaces a la derecha. El truco es justify-content: space-between con el logotipo y el grupo de enlaces como los dos hijos, además de un contenedor flex interno para los propios enlaces.

Sección Hero

Pila vertical con contenido centrado tanto horizontal como verticalmente, perfecto para áreas hero de páginas de aterrizaje. Utiliza flex-direction: column, justify-content: center y align-items: center en un contenedor alto.

Modal Centrado

Un diálogo modal perfectamente centrado dentro de su superposición. La misma receta de centrado de tres líneas mostrada arriba, aplicada a un contenedor de superposición de pantalla completa.

Pie de Página Fijo

Un pie de página que se sitúa al final del viewport cuando el contenido es corto, pero se empuja hacia abajo cuando el contenido es largo. Se logra dando al body display: flex; flex-direction: column; min-height: 100vh y al contenido principal flex: 1.

¿Cuál es la diferencia entre flex-grow, flex-shrink y flex-basis?

Estas tres propiedades (combinadas en la abreviatura flex) describen cómo un elemento maneja el espacio:

flex-basis establece el tamaño ideal del elemento antes de que se distribuya el espacio libre. Piénsalo como el "punto de partida" del elemento.
flex-grow dice "si hay espacio sobrante, toma esta parte de él". Un valor de 0 significa negarse a crecer; 1 significa crecer proporcionalmente; 2 significa tomar el doble de la parte que un elemento con 1.
flex-shrink dice "si no hay suficiente espacio, encógete en esta proporción". El valor por defecto es 1 (encogerse proporcionalmente); 0 significa negarse a encogerse.

La abreviatura flex: 1 se expande a flex: 1 1 0%: igual crecimiento, igual encogimiento, base cero, lo que significa que todos los elementos toman una parte igual del contenedor independientemente del contenido. flex: auto se expande a flex: 1 1 auto, que respeta el tamaño del contenido como base.

¿Cuándo debo usar Flexbox frente a Grid?

Usa Flexbox para diseños unidimensionales donde los elementos fluyen en una sola dirección: una fila de botones, una barra de navegación, una sola columna de tarjetas. Flexbox es consciente del contenido y es ideal cuando quieres que los elementos se dimensionen a sí mismos.

Usa CSS Grid para diseños bidimensionales donde necesites controlar tanto filas como columnas simultáneamente: diseños de página completa, galerías de imágenes, tableros. Grid es consciente del diseño y te permite colocar elementos en pistas con nombre.

Ambos son complementarios, no compiten. Muchos diseños reales los combinan: un diseño de página Grid con barras de navegación y filas de tarjetas Flexbox en su interior.

Consejos para dominar Flexbox

Visualiza los ejes. Siempre sabe qué dirección es la "principal" (main) y cuál es la "transversal" (cross); las pastillas de ejes del laboratorio lo hacen explícito.
Usa gap en lugar de márgenes. Los navegadores modernos admiten totalmente gap en contenedores flex y elimina la necesidad de trucos de margen incómodos en el último hijo.
Recurre a flex: 1. Cuando quieras que los elementos compartan el espacio por igual, esta abreviatura es casi siempre lo que buscas.
min-width: 0 en elementos flex. Los elementos tienen un ancho mínimo implícito basado en su contenido. Si cadenas largas irrompibles (como URLs) hacen que tu diseño se desborde, establece min-width: 0 en el elemento para sobrescribirlo.
Evita anchos solo en porcentajes. Mezclar anchos en porcentajes con flex-grow puede producir resultados sorprendentes. Prefiere flex-basis con un valor por defecto sensato.

Soporte y compatibilidad del navegador

CSS Flexbox es compatible con todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y todos los principales navegadores móviles. La propiedad gap en contenedores flex alcanzó soporte universal de navegadores en 2021. Los navegadores antiguos heredados (IE10/11) requieren prefijos de proveedor y tienen varios errores bien documentados; para esos públicos, considera flexbugs.

Preguntas frecuentes

¿Por qué mi elemento flex desborda el contenedor?

Los elementos flex tienen un min-width: auto implícito basado en su contenido. Palabras largas, bloques de código o texto preformateado pueden obligar a un elemento a ser más ancho que el contenedor. Corrígelo configurando min-width: 0 en el elemento (o min-height: 0 para diseños en columna).

¿Cuál es la diferencia entre space-between, space-around y space-evenly?

space-between no deja espacio en los extremos y deja un espacio igual entre los elementos. space-around pone medio espacio en cada extremo y espacios completos entre los elementos. space-evenly pone espacios iguales en los extremos y entre los elementos. Altérnalos en el laboratorio para sentir la diferencia.

¿Puedo animar las propiedades flex?

Sí. flex-grow, flex-shrink, flex-basis, order y gap se pueden transicionar. Animar flex-direction, justify-content y align-items no es compatible porque son propiedades enumeradas discretas.

¿El laboratorio funciona sin conexión?

Todo el cálculo de Flexbox ocurre en tu navegador usando CSS nativo. Una vez que se carga la página, puedes usar el laboratorio sin conexión a Internet; no hay llamadas a la API ni computación en el servidor.

¿El código generado está listo para producción?

Sí. El CSS exportado utiliza propiedades estándar compatibles con todos los navegadores modernos. El HTML utiliza nombres de clase semánticos (flex-container, flex-item) que puedes renombrar para que se ajusten a las convenciones de tu proyecto.

Recursos adicionales

Cite este contenido, página o herramienta como:

"Laboratorio CSS Flexbox" en https://MiniWebtool.com/es/laboratorio-css-flexbox/ de MiniWebtool, https://MiniWebtool.com/

por el equipo de miniwebtool. Actualizado: 25 de abr. de 2026

Otras herramientas relacionadas:

Generador de esquemas de colores

Compresor CSS en línea

Generador de CSS GridNuevo

Generador de Gradientes

Compresor HTML en línea

Laboratorio CSS Flexbox

Laboratorio CSS Flexbox

¿Qué es CSS Flexbox?

Cómo usar este laboratorio

Referencia de propiedades del contenedor

Referencia de propiedades de los elementos

¿Cuál es la diferencia entre justify-content y align-items?

¿Cómo centro un elemento con Flexbox?

Explicación de los ajustes de diseño reales

Diseño Santo Grial

Cuadrícula de Tarjetas

Barra de Navegación

Sección Hero

Modal Centrado

Pie de Página Fijo

¿Cuál es la diferencia entre flex-grow, flex-shrink y flex-basis?

¿Cuándo debo usar Flexbox frente a Grid?

Consejos para dominar Flexbox

Soporte y compatibilidad del navegador

Preguntas frecuentes

¿Por qué mi elemento flex desborda el contenedor?

¿Cuál es la diferencia entre space-between, space-around y space-evenly?

¿Puedo animar las propiedades flex?

¿El laboratorio funciona sin conexión?

¿El código generado está listo para producción?

Recursos adicionales

Otras herramientas relacionadas:

Herramientas para administradores web:

Herramientas destacadas: