Generador de Flexbox CSS
Experimenta con todas las propiedades de flexbox en un diseño en tiempo real, haz clic en cualquier elemento para ajustar su flex-grow, shrink, basis, order o align-self, y copia CSS y HTML limpios. Funciona por completo en tu navegador.
Última actualización:
Contenedor
Elemento 1
Cómo usar Generador de Flexbox CSS
- Elige un ajuste predefinido o empieza con la fila básica de cuatro elementos.
- Configura el contenedor: elige flex-direction, wrap, justify-content, align-items y los espacios, y observa cómo se actualiza la vista previa.
- Haz clic en un elemento de la vista previa para seleccionarlo y cambia su flex-grow, flex-shrink, flex-basis, order o align-self.
- Añade o elimina elementos para probar cómo se comporta el diseño con más contenido.
- Pulsa Copiar CSS y Copiar HTML para usar el diseño en tu proyecto.
Chuleta de flexbox
| Propiedad | Se aplica a | Predeterminado | Qué controla |
|---|---|---|---|
flex-direction | Contenedor | row | Eje principal: row, row-reverse, column o column-reverse |
flex-wrap | Contenedor | nowrap | Si los elementos pueden pasar a nuevas líneas |
justify-content | Contenedor | normal (actúa como flex-start) | Espaciado de los elementos a lo largo del eje principal |
align-items | Contenedor | normal (actúa como stretch) | Posición de los elementos en el eje transversal |
align-content | Contenedor | normal (actúa como stretch) | Espaciado de las líneas ajustadas en el eje transversal |
gap | Contenedor | 0 | Espacio entre elementos (row-gap y column-gap) |
flex-grow | Elemento | 0 | Parte del espacio libre que ocupa el elemento |
flex-shrink | Elemento | 1 | Cuánto se encoge el elemento cuando falta espacio |
flex-basis | Elemento | auto | Tamaño inicial antes de crecer o encogerse |
order | Elemento | 0 | Orden visual (el menor va primero) |
align-self | Elemento | auto | Sustituye a align-items para un elemento |
Ejemplo práctico: cómo reparte el espacio flex-grow
Una fila de 900px de ancho contiene tres elementos con flex-basis: 200px y sin gap. Sus bases suman 600px, lo que deja 300px de espacio libre. Si los elementos tienen valores de flex-grow de 1, 1 y 1, cada uno recibe 300 ÷ 3 = 100px extra y termina con 300px de ancho. Con valores 2, 1 y 0, el espacio libre se divide en 3 partes de 100px: el primer elemento pasa a medir 200 + 200 = 400px, el segundo 200 + 100 = 300px y el tercero se queda en 200px.
Encoger funciona al revés, pero ponderado por el tamaño: cuando los elementos desbordan, cada uno se encoge en proporción a flex-shrink × flex-basis, así que los elementos más grandes ceden más espacio. Pon flex-shrink: 0 en todo lo que deba conservar su tamaño, como una barra lateral fija.
Formas abreviadas comunes de flex
| Forma abreviada | Equivale a | Úsala para |
|---|---|---|
flex: initial | 0 1 auto | La predeterminada: tamaño según el contenido, puede encogerse |
flex: 1 | 1 1 0% | Columnas del mismo ancho |
flex: auto | 1 1 auto | Crecer a partir del tamaño del contenido |
flex: none | 0 0 auto | Tamaño fijo que nunca crece ni se encoge |
flex: 0 0 200px | 0 0 200px | Barra lateral fija de 200px |
¿Necesitas filas y columnas a la vez? Un diseño grid es la mejor herramienta para plantillas de página completas. Ordena el código final con el Formateador CSS y el Formateador HTML.
Preguntas frecuentes
¿Cuál es la diferencia entre justify-content y align-items?
justify-content distribuye los elementos a lo largo del eje principal (horizontalmente con flex-direction: row), y align-items los coloca en el eje transversal (verticalmente en una fila). Al cambiar a flex-direction: column, los ejes se intercambian.
¿Cuándo tiene efecto align-content?
Solo cuando el contenedor tiene flex-wrap: wrap (o wrap-reverse), los elementos realmente se reparten en más de una línea y sobra espacio en la dirección transversal. Coloca las líneas como un grupo, igual que justify-content hace con los elementos.
¿Qué significa flex: 1?
flex: 1 es la forma abreviada de flex-grow: 1, flex-shrink: 1, flex-basis: 0%. Cada elemento con flex: 1 parte de un ancho cero y reparte el espacio libre a partes iguales, que es como se crean columnas del mismo ancho.
¿Cuál es la diferencia entre flex-basis y width?
flex-basis define el tamaño inicial del elemento a lo largo del eje principal antes de repartir el espacio libre, y tiene prioridad sobre width en una fila (o sobre height en una columna). flex-basis: auto recurre al width del elemento o al tamaño de su contenido.
¿Cómo centro un div con flexbox?
Dale al padre display: flex, justify-content: center y align-items: center, y una altura. El hijo queda centrado horizontal y verticalmente. El ajuste Centrado perfecto genera exactamente eso.
¿La propiedad order afecta a la accesibilidad?
Sí. order solo cambia el orden visual; los lectores de pantalla y el orden de tabulación del teclado siguen el código HTML. Úsala para pequeños ajustes visuales y cambia el orden del HTML cuando importe el orden de lectura.
¿Debo usar flexbox o CSS grid?
Usa flexbox para diseños unidimensionales en los que los elementos fluyen en una fila o una columna (barras de navegación, barras de herramientas, filas de tarjetas, centrado). Usa CSS grid para diseños bidimensionales en los que controlas filas y columnas a la vez, como plantillas de página.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.