Hoja de Referencia de Diseño CSS Flexbox
Esta página proporciona una hoja de referencia visual para el diseño CSS Flexbox, incluyendo propiedades del contenedor, propiedades de los ítems y ejemplos comunes de maquetación.
Propiedades del Contenedor
| Propiedad | Valor | Descripción |
|---|---|---|
display |
flex |
Habilita el diseño elástico |
flex-direction |
row |
El eje principal es horizontal, el inicio está a la izquierda |
row-reverse |
El eje principal es horizontal, el inicio está a la derecha | |
column |
El eje principal es vertical, el inicio está en la parte superior | |
column-reverse |
El eje principal es vertical, el inicio está en la parte inferior | |
flex-wrap |
nowrap |
Valor por defecto, los ítems se disponen en una sola línea |
wrap |
Los ítems saltan de línea | |
wrap-reverse |
Los ítems saltan de línea en orden inverso | |
justify-content |
flex-start |
Alineación del eje principal: alineado a la izquierda |
flex-end |
Alineación del eje principal: alineado a la derecha | |
center |
Alineación del eje principal: centrado | |
space-between |
Alineación del eje principal: justificado, con espacio igual entre ítems | |
space-around |
Alineación del eje principal: espacio igual alrededor de los ítems | |
align-items |
flex-start |
Alineación del eje secundario: alineado arriba |
flex-end |
Alineación del eje secundario: alineado abajo | |
center |
Alineación del eje secundario: centrado | |
baseline |
Alineación del eje secundario: alineado según la línea base del texto | |
stretch |
Valor por defecto, alineación del eje secundario: estirar para llenar el contenedor | |
align-content |
flex-start |
Alineación del eje secundario (varias líneas): alineado arriba |
flex-end |
Alineación del eje secundario (varias líneas): alineado abajo | |
center |
Alineación del eje secundario (varias líneas): centrado | |
space-between |
Alineación del eje secundario (varias líneas): justificado, con espacio igual entre líneas | |
space-around |
Alineación del eje secundario (varias líneas): espacio igual alrededor de las líneas | |
stretch |
Valor por defecto, alineación del eje secundario (varias líneas): estirar para llenar el espacio restante |
Propiedades de los Ítems
| Propiedad | Valor | Descripción |
|---|---|---|
flex-grow |
número |
Define la proporción de crecimiento del ítem, el valor por defecto es 0 (no crece) |
flex-shrink |
número |
Define la proporción de encogimiento del ítem, el valor por defecto es 1 |
flex-basis |
auto |
Define el tamaño base del ítem antes de distribuir el espacio restante |
align-self |
auto |
Permite una alineación individual para un ítem específico, sobrescribiendo align-items |
flex-start |
El ítem se sitúa al inicio del contenedor | |
flex-end |
El ítem se sitúa al final del contenedor | |
center |
El ítem se sitúa en el centro | |
baseline |
El ítem se alinea con la línea base del contenedor | |
stretch |
El ítem se estira para llenar el contenedor (si tiene altura) |
Ejemplos Comunes de Diseño
| Diseño | Propiedades del Contenedor | Propiedades del Ítem |
|---|---|---|
| Barra de navegación horizontal | display: flex;justify-content: space-around; |
|
| Barra lateral vertical | display: flex;flex-direction: column;justify-content: flex-start; |
|
| Diseño de cuadrícula | display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| Diseño de tarjetas | display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |