Saltar al contenido principal
LibraTool logoLibraTool

Generador de CSS Flexbox gratis

Experimenta con dirección flex, ajuste, justificación y alineación en elementos en vivo — y copia el CSS.

Funciona sin conexión una vez cargado
Preajustes

Consejo: haz clic en un elemento en la previsualización para activar/desactivar flex-grow: 1 en él.

Previsualización en vivo
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 Todo se ejecuta en tu navegador — nada se carga.

Cómo funciona

Un patio de recreo interactivo de flexbox: cambia flex-direction, wrap, justify-content y align-items y observa cómo hasta 10 elementos en vivo se reorganizan al instante. Haz clic en cualquier elemento para darle flex-grow: 1 y ver cómo reclama espacio. El CSS se actualiza en vivo, listo para copiar en tu proyecto.

  1. 1
    Configura el contenedor
    Dirección, wrap, justify-content, align-items, gap.
  2. 2
    Añade elementos
    De uno a diez elementos flex numerados.
  3. 3
    Experimenta
    Haz clic en un elemento para alternar flex-grow y ver el efecto.
  4. 4
    Copia el CSS
    Las reglas del contenedor (y del elemento), listas para pegar.

Todo se ejecuta en tu navegador: nada se sube.

Herramientas relacionadas

🟦

Generador de CSS Grid

Diseña visualmente una cuadrícula CSS — pistas, unidades y espacios — y copia el CSS e HTML generados.

Probar
🌈

Generador de degradados CSS

Crea degradados lineales, radiales y cónicos CSS con una vista previa en vivo. Copia el CSS con un clic.

Probar
🎨

Generador de sombras de caja CSS

Generador visual para CSS box-shadow con vista previa en vivo, apilamiento de múltiples capas, selector de color, alternancia de inserción y copia con un solo clic. Incluye ajustes preestablecidos de material, neumorfismo y brillo.

Probar

Preguntas frecuentes