Cómo se usa
- Escriba un Nombre de la clase para el contenedor, por ejemplo toolbar. El CSS lo usa como selector de clase.
- Elija flex-direction, flex-wrap y los valores de alineación. Cada uno muestra primero su valor inicial.
- Fije el Número de elementos (de 1 a 12) y, después, el flex-grow, el flex-shrink y el flex-basis de cada elemento.
- Compruebe la Vista previa, copie el CSS en su hoja de estilos y ponga la clase en el contenedor.
Las propiedades del contenedor
El módulo CSS Flexible Box Layout (en inglés) ordena los hijos de un contenedor flex a lo largo de un eje principal. flex-direction elige el eje, y flex-wrap decide si los hijos pueden pasar a una línea nueva. justify-content reparte los hijos a lo largo del eje principal, y align-items y align-content los colocan en el eje transversal.
- flex-direction empieza en row y admite row-reverse, column y column-reverse.
- flex-wrap empieza en nowrap y admite también wrap y wrap-reverse.
- justify-content empieza en flex-start, y align-items y align-content empiezan en stretch.
Las propiedades de cada elemento
Cada hijo del contenedor es un elemento, y sus tres propiedades flex deciden cuánto espacio recibe. flex-grow empieza en 0 y reparte el espacio sobrante en proporción al factor. flex-shrink empieza en 1 y dice cuánto cede un elemento cuando falta espacio. flex-basis empieza en auto, que usa el tamaño que tiene el elemento; una longitud o un porcentaje fija antes un tamaño.
flex: flex-grow flex-shrink flex-basis; el valor inicial es 0 1 autoLo que la herramienta no escribe
- Las propiedades order, align-self y gap, que puede añadir a mano al contenedor o a un elemento.
- Los elementos a partir del duodécimo: la herramienta se detiene en 12 elementos, así que una lista más larga necesita sus reglas escritas a mano.
Ejemplo resuelto: una barra que ajusta líneas, con tres elementos
El nombre de la clase es toolbar, flex-wrap es wrap, justify-content es space-between y align-items es center. El primer elemento conserva los valores iniciales, así que no tiene regla. El segundo crece para ocupar el espacio sobrante, con una base de 0. El tercero conserva su tamaño, con una base de 200px. La herramienta escribe una regla solo para el segundo y el tercer elemento.
| Elemento | flex-grow | flex-shrink | flex-basis |
|---|---|---|---|
| 1 | 0 | 1 | auto |
| 2 | 1 | 1 | 0 |
| 3 | 0 | 0 | 200px |
Preguntas frecuentes
¿Cuál es la diferencia entre flex-grow y flex-basis?
flex-basis es el tamaño del que parte un elemento antes de repartir el espacio libre. flex-grow decide después cómo se reparte el espacio sobrante, en proporción al factor de cada elemento. Un elemento con una base de 0 y un crecimiento de 1 ocupa el espacio que dejan los demás.
¿Por qué el primer elemento del ejemplo no tiene regla?
Sus valores son los iniciales de las propiedades: flex-grow 0, flex-shrink 1 y flex-basis auto. El navegador usa esos valores sin regla, así que la herramienta escribe una regla solo para un elemento que se aparte de ellos.
¿Por qué align-items empieza en stretch?
El módulo Flexible Box Layout da a align-items el valor inicial stretch, así que los elementos llenan el eje transversal salvo que elija otro valor. La herramienta parte del mismo valor, de modo que el CSS coincide con lo que hace un navegador sin declaración.
¿Por qué flex-basis solo admite px, rem, em y %?
Son las unidades que comprueba la herramienta. También se admiten auto y el 0 sin unidad. Otras unidades, como vw, no se ofrecen aquí, así que escríbalas a mano si su diseño las necesita.
¿Puedo añadir espacio entre los elementos?
No con esta herramienta, que escribe las cinco propiedades del contenedor y los valores flex de cada elemento. Añada la separación (gap) a la regla del contenedor a mano, después de copiar el CSS.
¿Se envía a alguna parte el CSS que genero?
No. La vista previa y el CSS se hacen en su navegador. Nada se guarda ni se envía a nuestro servidor, así que copie el CSS antes de salir de la página.
Fuentes
Cifras y texto revisados por última vez el jueves, 12 de noviembre de 2026.