⭐ 0
🔍
Texto Imagen PDF y Docs Audio Música Electrónica Tiempo Utilidades Validadores Esoterismo Juegos

Generador CSS Flexbox

Construye visualmente un layout CSS flexbox: flex-direction, justify-content, align-items, flex-wrap y gap en el contenedor, más flex-grow, flex-shrink y flex-basis por cada hijo, todo con previsualización en vivo y CSS copiable.

🔒 Procesado íntegramente en su navegador: nada de lo que ingresa aquí se carga nunca.

Procesando... 0%

Resultado

Un layout flexbox tiene dos conjuntos de reglas separados — propiedades en el contenedor (flex-direction, justify-content, align-items, flex-wrap, gap) y propiedades en cada hijo (flex-grow, flex-shrink, flex-basis) — y mezclarlos es la fuente más común de errores del tipo «¿por qué esto no se centra / crece / ajusta como espero?». Este generador pone ambos conjuntos de reglas en pantalla a la vez: cambia cualquier control del contenedor o los campos propios de cualquier hijo y tres cajas numeradas con código de color se actualizan inmediatamente, de modo que la causa y el efecto permanecen visibles.

La parte del contenedor cubre todos los ejes del layout: elige una dirección, decide cómo se distribuyen los hijos a lo largo del eje principal con justify-content, alinéalos en el eje transversal, elige si se envuelven en nuevas líneas y establece un gap en lugar de trucos de márgenes entre ellos. La parte de los hijos es igual de real: añade cajas hasta ocho, elimina hasta dejar dos, y asigna a cualquiera de ellas sus propios flex-grow, flex-shrink y flex-basis — el generador solo imprime una regla CSS por hijo cuando al menos uno de esos valores difiere del predeterminado del navegador, así que el código copiado nunca se rellena con flex-grow: 0 en cajas que no lo necesitan.

Las páginas predefinidas saltan directamente a los diseños que la gente realmente busca por nombre: cómo centrar un div (la pregunta de layout CSS más hecha, resuelta con justify-content y align-items ambos en center), una barra de navegación con logo a la izquierda y enlaces a la derecha, columnas flexibles de igual ancho mediante flex-grow, y una comparación lado a lado de space-between con sus parientes cercanos space-around y space-evenly.

Como toda herramienta de este sitio, el generador es gratuito y se ejecuta completamente en tu navegador: sin subidas, sin cuenta, y sigue funcionando sin conexión una vez cargada la página.

¿Te gusta esta herramienta? ¿Crees que este producto es útil? ¿Ves potencial en él y quieres apoyarlo?

🛡️
Ejecutado en el navegador

Tus archivos y datos nunca salen de este dispositivo. El procesamiento se ejecuta completamente sin conexión. 100% seguro.

Formatos aceptados y reglas

  • Controles del contenedor: flex-direction, justify-content, align-items, flex-wrap y un campo para gap en píxeles, aplicados en vivo a la previsualización.
  • Tres cajas hijo con código de color por defecto (añade hasta ocho, elimina hasta dejar dos), cada una con sus propios campos de flex-grow, flex-shrink y flex-basis.
  • Bloque de CSS copiable con una regla .flex-container más una regla .flex-item-N por cada hijo que tenga propiedades flex no predeterminadas.

Beneficios clave

✓ Cada control del contenedor y los valores de flex-grow, flex-shrink y flex-basis de cada hijo actualizan en vivo tres cajas numeradas de previsualización, para que veas exactamente lo que hacen tus reglas flexbox antes de tocar una hoja de estilos.
✓ El generador solo imprime las reglas de los hijos que realmente difieren de los valores por defecto de CSS, así que el código copiado se mantiene corto y legible en lugar de repetir flex-grow: 0 en cada caja.
✓ Las páginas predefinidas resuelven los diseños que la gente busca por nombre: centrar un div, una barra de navegación con logo a la izquierda y enlaces a la derecha, y columnas flexibles de igual ancho — abre una y la herramienta ya está configurada.

Casos de uso

  • • Consigue el CSS exacto para centrar un div tanto horizontal como verticalmente viendo cómo se comportan justify-content y align-items en cajas de previsualización en vivo.
  • • Construye un navbar con el logo a la izquierda y los enlaces a la derecha usando space-between y align-items: center, y luego copia el CSS del contenedor directamente en tu componente de cabecera.
  • • Compara space-between, space-around y space-evenly uno al lado del otro con las mismas tres cajas en lugar de adivinar cuál se ajusta al espaciado que buscas.