Guía educativa de Flexbox
Entiende Flexbox
Aprende cómo se relacionan el contenedor, los ejes y cada ítem. Consulta la sintaxis y prueba los ejemplos de la guía en una preview conectada.
Modelo mental
Flexbox distribuye ítems en una dimensión cada vez. La dirección del contenedor define qué eje es el principal y cuál es el transversal.
El contenedor crea el contexto flex
display: flex convierte a los hijos directos en ítems flexibles. El contenedor decide el flujo, el salto de línea, la alineación y el espacio entre ellos.
Cada ítem negocia su tamaño
flex-grow, flex-shrink y flex-basis determinan cómo se reparte el espacio. align-self y order permiten excepciones individuales.
Propiedades del contenedor
Estas propiedades se aplican al elemento padre. Controlan la dirección, el salto de línea y la forma en que se distribuye el espacio disponible.
display
Activa el formato Flexbox para los hijos directos del elemento.
- Sintaxis
display: flex | inline-flex;- Valor inicial de CSS
inline- Valores
flexinline-flex
El valor inicial inline no crea un contexto flex. flex participa como bloque en el flujo exterior; inline-flex se comporta como un elemento en línea.
Consultar documentaciónAbre en una pestaña nuevaflex-direction
Define el eje principal y el sentido en el que se colocan los ítems.
- Sintaxis
flex-direction: row | row-reverse | column | column-reverse;- Valor inicial de CSS
row- Valores
rowrow-reversecolumncolumn-reverse
Los valores reverse cambian el orden visual, pero no modifican el orden del DOM ni de lectura.
Consultar documentaciónAbre en una pestaña nuevaflex-wrap
Decide si los ítems permanecen en una línea o se reparten entre varias.
- Sintaxis
flex-wrap: nowrap | wrap | wrap-reverse | balance;- Valor inicial de CSS
nowrap- Valores
nowrapwrapwrap-reversebalance
balance intenta equilibrar el contenido entre líneas y todavía es experimental. Comprueba su compatibilidad antes de usarlo en producción.
Consultar documentaciónAbre en una pestaña nuevajustify-content
Distribuye el espacio libre entre los ítems a lo largo del eje principal.
- Sintaxis
justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;- Valor inicial de CSS
normal- Valores
flex-startcenterflex-endspace-betweenspace-aroundspace-evenly
En un contenedor flex, normal se comporta como flex-start. No significa siempre alineación horizontal: con flex-direction: column, el eje principal es vertical.
Consultar documentaciónAbre en una pestaña nuevaalign-items
Alinea todos los ítems dentro de cada línea sobre el eje transversal.
- Sintaxis
align-items: stretch | flex-start | center | flex-end | baseline;- Valor inicial de CSS
normal- Valores
stretchflex-startcenterflex-endbaseline
En Flexbox, normal se comporta como stretch. El estiramiento solo ocurre cuando el tamaño transversal del ítem sigue siendo automático.
Consultar documentaciónAbre en una pestaña nuevaalign-content
Distribuye el conjunto de líneas flexibles sobre el eje transversal.
- Sintaxis
align-content: stretch | flex-start | center | flex-end | space-between | space-around | space-evenly;- Valor inicial de CSS
normal- Valores
stretchflex-startcenterflex-endspace-betweenspace-aroundspace-evenly
En Flexbox, normal se comporta como stretch. Necesita varias líneas y espacio transversal libre; no produce efecto visible con flex-wrap: nowrap.
Consultar documentaciónAbre en una pestaña nuevagap
Añade separación entre ítems y líneas sin usar márgenes en los hijos.
- Sintaxis
gap: <row-gap> <column-gap>?;- Valor inicial de CSS
normal- Valores
<length><percentage>
En Flexbox, el valor inicial normal equivale a una separación de cero. Con dos valores, el primero corresponde a row-gap y el segundo a column-gap.
Consultar documentaciónAbre en una pestaña nuevaPropiedades de los ítems
Los hijos directos pueden crecer, encoger, partir de un tamaño concreto o sobrescribir su alineación individual.
flex: 1 1 0;El shorthand flex expresa las tres decisiones juntas. flex: 1 1 0 permite que varios ítems partan de cero, crezcan y se repartan el espacio disponible.
flex
Combina flex-grow, flex-shrink y flex-basis en una sola declaración.
- Sintaxis
flex: <flex-grow> <flex-shrink> <flex-basis>;- Valor inicial de CSS
0 1 auto- Valores
initialautonone<number><width>
Los keywords auto, initial y none representan combinaciones frecuentes. Usar el shorthand evita estados parciales difíciles de razonar.
Consultar documentaciónAbre en una pestaña nuevaflex-grow
Indica qué proporción del espacio libre positivo puede recibir un ítem.
- Sintaxis
flex-grow: <number>;- Valor inicial de CSS
0- Valores
01<number [0,∞]>
El número es una proporción respecto a los hermanos, no una anchura ni un porcentaje.
Consultar documentaciónAbre en una pestaña nuevaflex-shrink
Indica cuánto puede reducirse un ítem cuando falta espacio en la línea.
- Sintaxis
flex-shrink: <number>;- Valor inicial de CSS
1- Valores
01<number [0,∞]>
El reparto del espacio negativo también tiene en cuenta flex-basis, por lo que dos ítems con flex-shrink: 1 no siempre encogen la misma cantidad.
Consultar documentaciónAbre en una pestaña nuevaflex-basis
Establece el tamaño base del ítem antes de repartir el espacio libre.
- Sintaxis
flex-basis: auto | content | <width>;- Valor inicial de CSS
auto- Valores
autocontent0<length><percentage>
Con auto se consulta el tamaño principal del ítem. Con 0, el reparto depende principalmente de los factores grow.
Consultar documentaciónAbre en una pestaña nuevaalign-self
Sobrescribe align-items para un único ítem en el eje transversal.
- Sintaxis
align-self: auto | stretch | flex-start | center | flex-end | baseline;- Valor inicial de CSS
auto- Valores
autostretchflex-startcenterflex-endbaseline
auto conserva la alineación definida por el contenedor; los demás valores crean una excepción individual.
Consultar documentaciónAbre en una pestaña nuevaorder
Cambia la posición visual de un ítem dentro del contenedor flex.
- Sintaxis
order: <integer>;- Valor inicial de CSS
0- Valores
-101<integer>
No cambia el orden del DOM. La lectura de tecnologías de asistencia y la navegación secuencial conservan el orden del documento.
Consultar documentaciónAbre en una pestaña nuevaErrores frecuentes
Cuando una propiedad parece no funcionar, normalmente falta espacio libre, no existen varias líneas o el tamaño mínimo del contenido está imponiendo un límite.
align-content no alinea ítems individuales
- Resultado esperado
- Alinear los ítems dentro de una única línea sobre el eje transversal.
- Causa
- align-content distribuye líneas completas y no tiene efecto con flex-wrap: nowrap, una sola línea o sin espacio transversal libre.
- Solución
- Usa align-items para alinear ítems. Para probar align-content, activa wrap, crea al menos dos líneas y da altura libre al contenedor.
Un ítem se niega a encoger
- Resultado esperado
- Que el ítem reduzca su tamaño cuando el contenedor se queda sin espacio.
- Causa
- El tamaño mínimo automático protege el contenido y puede impedir que el ítem encoja aunque flex-shrink sea mayor que 0.
- Solución
- Aplica min-inline-size: 0 al hijo flexible y decide después cómo debe ajustarse o desbordar su contenido.
El orden visual no es el orden de lectura
- Resultado esperado
- Que el orden que se ve también sea el orden de lectura y navegación por teclado.
- Causa
- flex-direction: *-reverse y order recolocan visualmente los ítems, pero no reorganizan el DOM.
- Solución
- Mantén el orden semántico correcto en el HTML y reserva la reordenación visual para contenidos cuya secuencia no comunique significado.
width y flex-basis compiten por el tamaño inicial
- Resultado esperado
- Que width o height determine por sí solo el tamaño inicial del ítem.
- Causa
- En el eje principal, flex-basis suele definir el punto de partida. Solo con auto puede recurrir al tamaño principal o al contenido.
- Solución
- Elige una fuente de tamaño deliberada: usa flex-basis o el shorthand flex, y deja auto cuando quieras partir de width o height.
Comparativas
Un mismo layout puede construirse con distintos modelos, pero cada uno relaciona los elementos y reparte el espacio de forma diferente. Compararlos ayuda a elegir la estructura que expresa mejor el diseño.
display: flex;frente adisplay: grid;Un eje flexible o una cuadrícula bidimensional
Flexbox distribuye contenido principalmente en una dirección y deja que los ítems negocien el espacio. Grid coordina filas y columnas y permite definir una estructura espacial más explícita.
Probar esta estructura en el lab de CSS Grid