CSS Flexbox Playground

Construye y visualiza layouts flexbox de forma interactiva. Ajusta las propiedades del contenedor y los elementos con vista previa en vivo.

Cómo funciona: Ajusta las propiedades del contenedor y los elementos para construir tu layout flexbox. Ve los cambios al instante en la vista previa. Copia el CSS generado cuando estés listo.

12px
1
2
3
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  gap: 12px;
}

¿Qué es CSS Flexbox?

CSS Flexbox (Flexible Box Layout) es un método de layout unidimensional para organizar elementos en filas o columnas. Ofrece potentes capacidades de alineación y distribución dinámica del espacio, convirtiéndolo en la opción preferida para layouts de componentes, barras de navegación y diseños responsivos.

Cómo Usar el Flexbox Playground

Empieza ajustando las propiedades del contenedor: flex-direction controla el eje principal, justify-content distribuye el espacio a lo largo de él, y align-items posiciona los hijos en el eje cruzado. Agrega o elimina elementos hijos y personaliza sus valores individuales de flex-grow, flex-shrink y flex-basis para ver cómo responden al espacio disponible.

Flexbox vs. CSS Grid

Flexbox está diseñado para layouts unidimensionales — ya sea una fila o una columna. CSS Grid maneja layouts bidimensionales con filas y columnas simultáneamente. Usa Flexbox para layouts a nivel de componente (navbars, filas de cards, controles de formulario) y Grid para layouts a nivel de página. Funcionan muy bien juntos.

Patrones Comunes de Flexbox

  • Contenido centrado: justify-content y align-items configurados en center
  • Layout con sidebar: un elemento con ancho fijo, otro con flex-grow: 1
  • Barra de navegación: dirección row con space-between
  • Holy grail: header, footer y cuerpo de tres columnas usando flex anidado
  • Columnas iguales: todos los hijos con flex: 1
  • Wrap responsivo: flex-wrap con flex-basis basado en porcentajes