Resumen
La propiedad CSS flex es una propiedad resumida que indica la capacidad de un elemento flexible para alterar sus dimensiones y llenar el espacio disponible. Los elementos flexibles pueden ser estirados para utilizar el espacio disponible proporcional a su factor de crecimiento flexible o su factor de contracción flexible para evitar desbordamiento.
Valor inicial | as each of the properties of the shorthand:
|
---|---|
Applies to | flex items, including in-flow pseudo-elements |
Heredable | no |
Media | visual |
Valor calculado | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Canonical order | order of appearance in the formal grammar of the values |
Consulte Cómo usar las cajas flexibles de CSS para conocer más propiedades e información.
Sintáxis
/* 0 0 auto */
flex: none;
/* Un valor, número sin unidades: flex-grow */
flex: 2;
/* Un valor, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;
/* Dos valores: flex-grow | flex-basis */
flex: 1 30px;
/* Dos valores: flex-grow | flex-shrink */
flex: 2 2;
/* Tres valores: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Valores globales */
flex: inherit;
flex: initial;
flex: unset;
Valores
<'flex-grow'>
-
Define el flex-grow del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.
<'flex-shrink'>
- Define el
flex-shrink
del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite. <'flex-basis'>
- Define el
flex-basis
del elemento flexible. Se acepta cualquier valor válido para las propiedadeswidth
yheight
. Un tamaño preferente de 0 debe tener una unidad para evitar ser interpretado como flexible. El valor predeterminado es 0% cuando se omite. none
- Esta palabra clave se computa a
0 0 auto
. -
Sintaxis normal
none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Ejemplo
#flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#flex-container > .flex-item {
-webkit-flex: auto;
flex: auto;
}
#flex-container > .raw-item {
width: 5rem;
}
<div id="flex-container">
<div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
<div class="raw-item" id="raw">Raw box</div>
</div>
Resultado
Especificaciones
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module La definición de 'flex' en esta especificación. |
Candidate Recommendation | Initial definition |
Compatibilidad de Navegadores
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 18.0 (18.0)[1] 20.0 (20.0) 28.0 (28.0)[2] |
21.0-webkit 29.0 |
10.0-ms[3] 11.0[3] |
12.10 |
6.1-webkit |
Feature | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | 4.4 | 11 | 12.10 | 7.1-webkit |
[1] En Gecko 18.0 (Firefox 18.0 / Thunderbird 18.0 / SeaMonkey 2.15) y 19.0 (Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16) el soporte de cajas flexibles está oculto en las preferencias about:config
en layout.css.flexbox.enabled
, por defecto en false
.
[2] Las cajas flexibles multi-línea están soportadas desde Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25).
[3] Internet Explorer 10-11 (pero no 12+) ignora el uso de calc()
en la parte flex-basis
de la sintaxis de flex. Esto se puede solucionar mediante el uso de las propiedades normales en lugar de las abreviadas. Ver Flexbug #8 para más info. Además una declaración flex
con un valor sin unidad en su parte flex-basis
es considerado sintácticamente no valido en esas versiones y por lo tanto será ignorado. Una solución consiste en incluir siempre una unidad en la parte flex-basis
del valor abreviador flex
. Ver Flexbug #4 para más info.