¿Cuándo debo usar Flexbox vs Grid?

Flexbox es mejor para diseños unidimensionales (filas O columnas). Grid es para diseños bidimensionales (filas Y columnas). Muchos diseños usan ambos.

¿Qué hace flex-wrap?

Por defecto, los elementos flex permanecen en una línea y se encogen. flex-wrap: wrap permite que los elementos pasen a la siguiente línea cuando no caben.

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

justify-content alinea elementos a lo largo del eje principal (horizontal en row, vertical en column). align-items alinea a lo largo del eje cruzado (perpendicular).

Herramienta para Desarrolladores

Playground de CSS Flexbox

Aprende y experimenta con CSS Flexbox visualmente. Ajusta propiedades y copia el CSS generado.

100% gratis — no se necesita cuenta

Preajustes de Layout

Controles del Contenedor

flex-direction

justify-content

align-items

flex-wrap

gap: 12px

Elementos: 4

Controles del Elemento

Elemento 1

grow:

shrink:

order:

Elemento 2

grow:

shrink:

order:

Elemento 3

grow:

shrink:

order:

Vista Previa

CSS Generado

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
}

Aprendizaje Visual de Flexbox

Experimenta con propiedades flex de forma interactiva

Controles del Contenedor

Direction, justify-content, align-items, wrap y gap — todos ajustables.

Vista Previa en Vivo

Ve los elementos flex coloreados responder a tus cambios en tiempo real.

5 Preajustes de Diseño

Diseños centrado, barra de navegación, barra lateral, tipo grilla y pie de página.

Copiar CSS

CSS generado para el contenedor listo para usar en tu proyecto.

FAQ

Herramientas para Desarrolladores

Más utilidades CSS

Gradiente CSS, box shadow, conversor Tailwind y más.