#Propiedades del contenedor
| Propiedad | Valores | Descripción | |
|---|---|---|---|
display | flexinline-flex | Habilitar contenedor flex | |
flex-direction | rowrow-reversecolumncolumn-reverse | Establecer dirección del eje principal | |
flex-wrap | nowrapwrapwrap-reverse | Establecer comportamiento de ajuste | |
flex-flow | row nowrapcolumn wrap... | Atajo para direction + wrap | |
justify-content | flex-startflex-endcenterspace-betweenspace-aroundspace-evenly | Alineación del eje principal | |
align-items | flex-startflex-endcenterstretchbaseline | Alineación del eje transversal | |
align-content | flex-startflex-endcenterstretchspace-betweenspace-around | Alineación de múltiples líneas en eje transversal | |
gap | 10px1rem10px 20px | Espacio entre elementos |
#Propiedades del elemento
| Propiedad | Valores | Descripción | |
|---|---|---|---|
order | 01-1... | Orden del elemento | |
flex-grow | 012... | Ratio de crecimiento | |
flex-shrink | 01... | Ratio de reducción | |
flex-basis | auto0100px50% | Tamaño inicial | |
flex | 10 1 auto1 1 0... | Atajo para grow shrink basis | |
align-self | autoflex-startflex-endcenterstretchbaseline | Alineación individual en eje transversal |
#Patrones comunes
| Propiedad | Valores | Descripción | |
|---|---|---|---|
Alineación central | justify-content: centeralign-items: center | Centrado perfecto | |
Espaciado entre extremos | justify-content: space-between | Primero y último en los extremos | |
Distribución uniforme | justify-content: space-evenly | Espaciado igual en todas partes | |
Diseño vertical | flex-direction: column | Diseño en dirección vertical | |
Ajuste automático | flex-wrap: wrap | Ajuste automático cuando desborda | |
Ancho igual | flex: 1 | Elementos de igual ancho | |
Fijo + fluido | flex: 0 0 200pxflex: 1 | Barra lateral + diseño principal |
#Valores abreviados de flex
| Propiedad | Valores | Descripción | |
|---|---|---|---|
flex: initial | = flex: 0 1 auto | Solo reducir, mantener base | |
flex: auto | = flex: 1 1 auto | Puede crecer y reducirse | |
flex: none | = flex: 0 0 auto | Tamaño fijo, sin flex | |
flex: 1 | = flex: 1 1 0 | Distribución igual |
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.