Playground de Flexbox

Experimenta con todas las propiedades de Flexbox, añade o quita ítems y copia el CSS, el HTML o las clases de Tailwind del layout que armes.

¿Qué es Flexbox?

Flexbox es un sistema de layout en una dimensión: acomoda elementos en una fila o en una columna y reparte el espacio sobrante entre ellos. Se activa con display: flex en el contenedor y sus hijos directos se vuelven ítems flexibles.

Piensa en una repisa: el contenedor es la repisa y los ítems son los libros. Puedes decidir hacia dónde se acomodan (flex-direction), cómo se reparten a lo largo (justify-content), cómo se alinean a lo alto (align-items) y si pueden pasar a otra repisa cuando no caben (flex-wrap).

Propiedad	Dónde va	Qué hace
flex-direction	contenedor	Eje principal: fila (row) o columna (column).
justify-content	contenedor	Reparte los ítems sobre el eje principal.
align-items	contenedor	Alinea los ítems sobre el eje cruzado.
flex-wrap	contenedor	Permite que los ítems bajen a otra línea.
gap	contenedor	Espacio entre ítems (sin márgenes).
flex-grow / flex-shrink	ítem	Cuánto crece o se encoge respecto a los demás.
flex-basis	ítem	Tamaño inicial antes de repartir el espacio.
align-self / order	ítem	Alineación propia y orden visual.

.contenedor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

Generador

Elige un preset o cambia las propiedades del contenedor. Haz clic en un ítem de la vista previa para editar sus propiedades individuales.

Playground de Flexbox

Contenedor

flex-direction rowrow-reversecolumncolumn-reverseflex-wrap nowrapwrapwrap-reversejustify-content flex-startflex-endcenterspace-betweenspace-aroundspace-evenlyalign-items stretchflex-startflex-endcenterbaselinealign-content (sólo con wrap)normalflex-startflex-endcenterspace-betweenspace-aroundspace-evenlystretchgappxAlto mínimopx

Ítems (3)

Haz clic en un ítem (aquí o en la vista previa) para editar sus propiedades.

1

2

3

.contenedor {
  display: flex;
  gap: 12px;
  min-height: 260px;
}

.item {
  padding: 16px;
  border-radius: 8px;
  background: #7c3aed;
  color: #fff;
}

Consejos de uso

• Centrar algo horizontal y verticalmente: display: flex; justify-content: center; align-items: center; en el padre.
• Empujar un elemento al final (por ejemplo, el botón de una navbar): dale margin-left: auto, o flex-grow: 1 al elemento anterior.
• Tarjetas responsive sin media queries: flex-wrap: wrap en el contenedor y flex: 1 1 250px en cada tarjeta.
• Usa gap en lugar de márgenes entre ítems: no tienes que quitar el margen del último.
• Si un ítem se encoge de más (por ejemplo una imagen o un icono), ponle flex-shrink: 0.
• Cuando cambias a flex-direction: column, los ejes se intercambian: justify-content pasa a controlar lo vertical y align-items lo horizontal.

¿Flexbox o Grid?

Flexbox brilla en una dimensión (una fila de botones, una navbar, centrar algo). Si necesitas controlar filas y columnas a la vez, usa el Generador de Grid.

Error común

order sólo cambia el orden visual. Los lectores de pantalla y el tabulador siguen el orden del HTML, así que no lo uses para reordenar contenido importante.