Generador de Flexbox CSS
Crea maquetaciones Flexbox de forma visual: dirección, ajuste de línea, justify-content, align-items, gap y crecimiento por elemento. Ajustes predefinidos para cabeceras, barras laterales y cuadrículas de tarjetas. CSS, SCSS, Tailwind.
Cargando Generador de Flexbox CSS…
Tus archivos nunca salen de tu dispositivo
Cómo usar Generador de Flexbox CSS
- 1
Abre Generador de Flexbox CSS en esta página. Se carga directamente en tu navegador.
- 2
Añade tu archivo, texto o valores y ajusta la configuración.
- 3
Copia o descarga el resultado. No se sube ni se guarda nada.
Acerca de esta herramienta
Flexbox es el sistema de maquetación CSS para colocar elementos en fila o en columna: barras de navegación, grupos de botones, tarjetas, contenido centrado. Sus propiedades son potentes pero fáciles de confundir. Este generador de Flexbox te deja cambiarlas con botones y ver el resultado en cajas en vivo, y luego copiar el código.
Cómo crear una maquetación flex
- Empieza con un ajuste predefinido: horizontal, vertical, centrado, space between, space around, space evenly, cuadrícula, cabecera, barra lateral o cuadrícula de tarjetas.
- Configura el contenedor: flex-direction, flex-wrap, justify-content, align-items, align-content y gap.
- Añade o quita elementos y ajusta el flex-grow y el tamaño de cada uno.
- Copia el CSS, el SCSS o las clases de Tailwind.
Chuleta de Flexbox
| Propiedad | Qué hace |
|---|---|
| flex-direction | Eje principal: row (horizontal) o column (vertical) |
| justify-content | Espaciado en el eje principal: start, center, end, between, around, evenly |
| align-items | Alineación en el eje transversal: stretch, start, center, end, baseline |
| flex-wrap | Si los elementos pasan a otra línea cuando falta espacio |
| gap | Espacio entre elementos |
| flex-grow | Cuánto se expande un elemento para llenar el espacio libre |
Recetas habituales
- Centrar cualquier cosa: display: flex; justify-content: center; align-items: center.
- Logo a la izquierda, menú a la derecha: justify-content: space-between en la cabecera.
- Maquetación con barra lateral: una barra lateral de ancho fijo y un área principal con flex-grow: 1.
- Tarjetas que saltan de línea: flex-wrap: wrap con un gap y un ancho mínimo de tarjeta.
¿Flexbox o grid?
Usa Flexbox para una sola dirección a la vez, como una fila de botones o una columna de campos. Usa CSS grid para maquetaciones bidimensionales con filas y columnas que deben alinearse. Muchas páginas combinan ambos. Para cuadrículas de página, mira el generador de sistemas de cuadrícula; para dar estilo a las cajas, los generadores de border-radius y box-shadow.
Preguntas frecuentes
¿Cómo centro un div con Flexbox?
En el padre, pon display: flex, justify-content: center y align-items: center. Dale una altura al padre si quieres centrar verticalmente en un área alta.
¿Qué diferencia hay entre justify-content y align-items?
justify-content reparte los elementos en el eje principal (horizontal en una fila) y align-items los alinea en el eje transversal (vertical en una fila).
¿Cuándo usar Flexbox en lugar de grid?
Flexbox para maquetaciones en una dirección, como barras de navegación y grupos de botones; grid para maquetaciones bidimensionales con filas y columnas.
¿Puedo obtener clases de Tailwind?
Sí. Elige la exportación Tailwind para obtener clases de utilidad como flex, justify-between y gap-4.
¿Cómo hago que los elementos pasen a la siguiente línea?
Pon flex-wrap: wrap en el contenedor. Los elementos pasan a una nueva línea cuando se quedan sin espacio.
¿Qué hace flex-grow?
Permite que un elemento ocupe el espacio libre restante. Un elemento con flex-grow: 1 se expande, mientras que los que tienen 0 mantienen su tamaño.