Generador de CSS Flexbox
Se ejecuta localmente en tu navegadorCrea diseños Flexbox de forma visual y copia CSS, HTML o Tailwind
Vista previa en vivo
Eje principal → · Eje transversal ↓ · row / nowrap
El área rayada muestra el espacio gap: Espacio entre filas 12px · Entre columnas 12px
Código = posición en el HTML. order = orden CSS, que solo cambia la colocación visual.
3/24 · Hasta 24 elementos.
Las guías muestran los ejes, la posición en el código, el order de CSS y el espacio gap. Nunca se exportan.
Código generado
.flex-container contiene las reglas del contenedor; .flex-item-N contiene las reglas del elemento N. Elemento seleccionado: .flex-item-1.
/* Sample box styles that match the preview */
.flex-container {
box-sizing: border-box;
padding: 12px;
border-width: 1px;
border-style: dashed;
border-color: #94a3b8;
border-radius: 8px;
}
.flex-item {
box-sizing: border-box;
margin: 0;
padding: 12px 16px;
border-width: 2px;
border-style: solid;
font-size: 14px;
line-height: 20px;
border-color: #6366f1;
border-radius: 6px;
background: #eef2ff;
color: #1e1b4b;
}
/* Flexbox layout */
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 12px;
width: 100%;
height: 220px;
}
.flex-item.flex-item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
.flex-item.flex-item-2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
.flex-item.flex-item-3 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
El código se actualiza en vivo mientras editas.
Se ejecuta localmente en tu navegador. La configuración puede guardarse en el almacenamiento del navegador de este dispositivo.
Herramientas relacionadas
Generador de CSS Flexbox
Crea diseños Flexbox de forma visual y copia CSS, HTML o clases de Tailwind listos para producción.
Cómo usarlo
Elige una plantilla o ajusta el contenedor. Haz clic o selecciona con el teclado un elemento para editar flex-grow, flex-shrink, flex-basis, order y align-self. Añade, quita y reordena elementos, y luego copia o descarga CSS, HTML + CSS o Tailwind.
Ayudas visuales de aprendizaje
Las guías dibujan los ejes principal y transversal según la dirección y el ajuste actuales, etiquetan cada elemento con su posición en el código y su order de CSS, y rayan el espacio gap entre elementos y líneas.
Límites y privacidad
Hasta 24 elementos. Las longitudes aceptan valores no negativos en px, rem, em, %, vw y vh; no se aceptan calc() ni CSS personalizado. La vista previa asume escritura horizontal de izquierda a derecha. Todo se ejecuta en tu navegador y la configuración puede guardarse en el almacenamiento local.
