Cómo usar: Generador de Flexbox CSS
- Elige un preset (centrar, navbar, tarjetas con ajuste, barra lateral, apilado) o empieza desde cero.
- Configura el contenedor: flex-direction, flex-wrap, justify-content (eje principal), align-items (eje transversal) y gap.
- Haz clic en un elemento para ajustar su flex-grow, shrink, basis, order y align-self; usa + Añadir elemento o Quitar para cambiar cuántos hay.
- Redimensiona el contenedor para probarlo y luego copia el CSS, el HTML o las clases de Tailwind.
Los dos ejes de flexbox
Flexbox distribuye los elementos a lo largo de un eje principal (definido por flex-direction) y un eje transversal perpendicular a él. justify-content reparte los elementos en el eje principal; align-items los alinea en el eje transversal. Si cambias a column, los dos intercambian su función, por eso “centrar verticalmente” a veces necesita justify-content y otras veces align-items.
flex: grow shrink basis
| Atajo | Equivale a | Úsalo para |
|---|---|---|
flex: 1 | 1 1 0% | Columnas de igual ancho que comparten el espacio |
flex: auto | 1 1 auto | Crecer a partir del tamaño del propio contenido |
flex: none | 0 0 auto | Elementos fijos, como un logo o un icono |
flex: 1 1 240px | Empieza en 240px y luego crece o se encoge | Cuadrículas de tarjetas con ajuste |
margin-left: auto en un elemento lo empuja —junto con todo lo que haya después— hasta el extremo final, la forma clásica de alinear a la derecha un botón “Iniciar sesión” en una barra de navegación. Para layouts bidimensionales, con filas y columnas, el Generador de CSS Grid encaja mejor.
También se busca como: generador flexbox, generador css flexbox, playground flexbox, constructor flexbox, justify-content generador, align-items css, generador de layout flex, generador flex tailwind.
Herramientas que combinan con: Generador de Flexbox CSS
- Generador de Border Radius — Redondea las esquinas de cualquier caja: arrastra un control para todas las esquinas o define cada esquina por separado, cambia a esquinas elípticas para formas de blob y hoja, y copia el CSS border-radius válido más corto.
- Generador de Box Shadow — Apila varias capas de sombra, ajusta el desplazamiento, el desenfoque, la expansión y la opacidad sobre una tarjeta en vivo, y luego copia el CSS de box-shadow o text-shadow.
- CSS a Tailwind — Pega reglas o declaraciones CSS y obtén las clases utilitarias de Tailwind equivalentes para cada selector, incluidos los estados hover: y los valores arbitrarios como p-[13px].
- Calculadora de abrazaderas — Introduce un tamaño mínimo y máximo y el rango de la ventana de visualización: obtendrás un valor fácil de ajustar con el zoom clamp() con una explicación de los cálculos, una vista previa en directo y una escala completa y fluida de tipo o espacio.
Preguntas frecuentes
¿Cómo centro un div con flexbox?
En el elemento padre: display: flex; justify-content: center; align-items: center; y dale una altura. Elige el preset “Centrar cualquier cosa” para verlo.
¿Cuál es la diferencia entre justify-content y align-items?
justify-content posiciona los elementos en el eje principal (horizontal en una fila), y align-items en el eje transversal (vertical en una fila). Con flex-direction: column se intercambian.
¿Por qué mis elementos flex no se ajustan a la línea?
flex-wrap tiene por defecto el valor nowrap, así que los elementos se encogen para caber en una sola línea. Usa flex-wrap: wrap y dales un flex-basis o un min-width para que tengan un tamaño con el que ajustarse.
¿Flexbox o grid?
Flexbox para una dirección a la vez: barras de navegación, barras de herramientas, centrados y filas de tarjetas. Grid cuando necesites filas y columnas alineadas, como en layouts de página y paneles de control.
¿Puedo instalar Generador de Flexbox CSS como aplicación web y utilizarla sin conexión?
Sí. Generador de Flexbox CSS es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.