Guía visual de CSS
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.
El modelo mental de Flexbox
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 flex
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 flexibles
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 habituales al usar Flexbox
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.
Flexbox frente a otros modelos de layout
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