Generador de Flexbox CSS

Ajusta flex-direction, wrap, justify-content, align-items, gap y el flex, order y align-self de cada elemento de forma visual, con hijos en vivo y CSS para copiar.

Contenedor

flex-direction

flex-wrap

justify-content

align-items

align-content

gappx

align-content solo tiene efecto cuando los elementos se reparten en varias líneas.

Número de elementos

Elemento 1

Selecciona un elemento aquí o haz clic en él en la vista previa.

flex-grow

flex-shrink

order

flex-basis

align-self

Vista previa

Arrastra la esquina inferior de la vista previa para cambiar el tamaño del contenedor.

Código CSS

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

Herramientas Relacionadas

Ver Todas

Generador de box-shadow CSS Generador de degradados CSS Generador de CSS Grid Generador de border-radius Generador de glassmorphism Generador de neumorfismo Generador de text-shadow Generador de animaciones CSS

¿Qué es Generador de Flexbox CSS?

Un playground interactivo de flexbox: ajusta las propiedades del contenedor, añade hasta 12 elementos hijos y afina flex-grow, flex-shrink, flex-basis, order y align-self de cada uno. La vista previa aplica exactamente el CSS generado.

Cómo usar Generador de Flexbox CSS

Configura el contenedor: flex-direction, flex-wrap, justify-content, align-items, align-content y gap.
Elige el Número de elementos que se muestran en la vista previa.
Selecciona un elemento (con su botón o haciendo clic en la vista previa) y ajusta flex-grow, flex-shrink, flex-basis, order y align-self.
Cambia el tamaño de la vista previa arrastrando su esquina para ver cómo reacciona el diseño.
Copia el código CSS de .container y las reglas .item-n.

Ejemplo

Entrada

justify-content space-between, gap 16px; item 2: flex-grow 1, order 2, align-self center

Salida

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

.item-2 {
  flex: 1 1 auto;
  order: 2;
  align-self: center;
}

Cuándo usar Generador de Flexbox CSS

Usa flexbox para diseños unidimensionales: barras de navegación, barras de herramientas, grupos de botones, media objects y centrado. Para diseños de página bidimensionales con filas y columnas a la vez, el Generador de CSS Grid suele ser la mejor herramienta.

Cómo funciona Generador de Flexbox CSS

El contenedor siempre recibe display: flex más la dirección, wrap, justify-content y align-items. align-content solo se escribe cuando los elementos pueden pasar a varias líneas (no tiene efecto con una sola línea), y gap solo cuando es mayor que 0. En los elementos solo se escriben los valores distintos de los predeterminados: flex: grow shrink basis cuando no es 0 1 auto, order cuando no es 0 y align-self cuando no es auto, en reglas llamadas .item-1, .item-2… Un flex-basis no válido se señala y se ignora.

Casos de Uso Comunes

Centrar contenido horizontal y verticalmente
Barras de navegación con un elemento empujado a la derecha
Columnas de igual ancho con flex: 1
Listas de etiquetas o tarjetas que pasan a la siguiente línea
Reordenar elementos visualmente con order

Preguntas Frecuentes

¿Por qué falta align-content en mi CSS?

align-content solo distribuye las líneas de un contenedor flex con wrap. Con flex-wrap: nowrap hay una sola línea, así que la herramienta lo omite.

¿Qué significa flex: 1 1 auto?

El elemento puede crecer (1) y encogerse (1) a partir de su tamaño automático. flex-grow decide cómo se reparte el espacio sobrante entre los elementos.

¿order afecta a la accesibilidad?

order solo cambia el orden visual. Los lectores de pantalla y el foco del teclado siguen el orden del código HTML, así que no lo uses para reordenaciones con significado.