Stax

Área de Juegos de CSS Flexbox

Experimenta con propiedades de Flexbox visualmente y copia el CSS.

1
2
3
4
5
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

¿Qué es el playground de CSS Flexbox?

Este playground interactivo es un lugar para experimentar visualmente con propiedades flexbox. Mira en vivo display, justify-content, align-items, flex-direction y todas las propiedades — copia el código CSS.

Cómo usar el playground

  1. Ajusta propiedades del contenedor (justify-content, align-items).
  2. Agrega/quita items.
  3. Prueba propiedades específicas de item (flex-grow, align-self).
  4. Ve el resultado en vivo.
  5. Copia el código CSS final.

Propiedades clave de flexbox

  • display: flex — crea contenedor
  • flex-direction — fila o columna
  • justify-content — alineación eje principal
  • align-items — alineación eje cruzado
  • flex-wrap — layouts multi-línea

Preguntas frecuentes

¿Qué es Flexbox?
Flexbox es un módulo de diseño CSS — organiza items flexiblemente en una sola dimensión (fila o columna). El contenedor tiene display: flex; los items dentro se alinean automáticamente. Perfecto para barras de navegación, layouts de tarjetas, centrado vertical.
¿Diferencia entre justify-content y align-items?
Para el eje principal (horizontal por defecto) justify-content: flex-start, center, space-between, space-around. Para el eje cruzado (vertical) align-items: flex-start, center, stretch, baseline. Ambos esenciales para alineación visual.
¿Qué son flex grow, shrink, basis?
flex-basis = tamaño inicial del item. flex-grow = cómo se distribuye el espacio extra (0 = fijo, 1 = parte igual). flex-shrink = cómo encoge en menos espacio. Forma corta: flex: 1 1 auto = grow, shrink, basis.
¿Cuándo usar Flexbox vs Grid?
Flexbox — layouts 1D (navbar, filas de botones, centrado vertical). Grid — 2D (layouts de página, grids de tarjetas, dashboards). En diseños modernos ambos se usan juntos. Aprende ambos.

Herramientas relacionadas