Chuleta de CSS Flexbox: propiedades y valores
Flexbox coloca los ítems en una dimensión — una fila o una columna — y distribuye el espacio entre ellos. Las propiedades se dividen en dos grupos: las que estableces en el contenedor (el padre flex) y las que estableces en los ítems (sus hijos).
El modelo mental: flex-direction fija el eje principal; justify-content alinea a lo largo de él, y align-items alinea a lo largo del eje cruzado perpendicular.
Actualizado 2026-07-06
Propiedades del contenedor (el padre flex)
| Propiedad | Valores | Qué hace |
|---|---|---|
| display | flex | inline-flex | Convertir un elemento en un contenedor flex |
| flex-direction | row | row-reverse | column | column-reverse | Dirección del eje principal |
| flex-wrap | nowrap | wrap | wrap-reverse | Si los ítems se envuelven a nuevas líneas |
| justify-content | flex-start | center | flex-end | space-between | space-around | space-evenly | Alineación a lo largo del eje principal |
| align-items | stretch | flex-start | center | flex-end | baseline | Alineación a lo largo del eje cruzado |
| align-content | flex-start | center | space-between | stretch | Alinea las líneas envueltas (varias filas) |
| gap | <length> (e.g. 16px) | Espacio entre ítems |
Propiedades de los ítems (los hijos)
| Propiedad | Valores | Qué hace |
|---|---|---|
| flex-grow | 0 | <number> | Cuánto crece un ítem para llenar el espacio |
| flex-shrink | 1 | <number> | Cuánto se encoge un ítem cuando el espacio escasea |
| flex-basis | auto | <length> | El tamaño inicial del ítem antes de crecer/encoger |
| flex | e.g. 1 1 0 | 1 | auto | Atajo para grow, shrink y basis |
| align-self | auto | center | flex-start | flex-end | stretch | Anular align-items para un ítem |
| order | 0 | <integer> | Reordenar un ítem visualmente (el menor va primero) |
El truco de centrado más común: en el contenedor, pon display: flex; justify-content: center; align-items: center; para centrar un hijo horizontal y verticalmente. Para las unidades de tamaño usadas en estos valores, mira la referencia de unidades CSS.