Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
Resumen
La propiedad flex-grow de CSS especifica el factor de crecimiento de un elemento flexible. Se especifica qué cantidad de espacio debe ocupar el elemento dentro del contenedor flexible.
| Valor inicial | 0 |
|---|---|
| Applies to | flex items, including in-flow pseudo-elements |
| Heredable | no |
| Media | visual |
| Valor calculado | como se especifica |
| Animatable | yes, as a number |
| Canonical order | el orden único no-ambigüo definido por la gramática formal |
Ver Usando las cajas flexibles en CSS para más propiedades e información.
Sintaxis
/* <number> valores */ flex-grow: 3; flex-grow: 0.6; /* Valores globales */ flex-grow: inherit; flex-grow: initial; flex-grow: unset;
Valores
<number>- Ver
<number>. Los valores negativos no son válidos.
Sintaxis formal
<number>
Ejemplo
HTML
<h4>This is a Flex-Grow</h4> <h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5> <div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> <div class="box1" style="background-color:brown;">D</div> <div class="box1" style="background-color:lightgreen;">E</div> <div class="box" style="background-color:brown;">F</div> </div>
CSS
#content {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-items: stretch;
align-items: stretch;
}
.box {
flex-grow: 1;
border: 3px solid rgba(0,0,0,.2);
}
.box1 {
flex-grow: 2;
border: 3px solid rgba(0,0,0,.2);
}
Resultado
Especificaciones
| Especificación | Estado | Comentario |
|---|---|---|
| CSS Flexible Box Layout Module The definition of 'flex-grow' in that specification. |
Candidate Recommendation | Definición inicial |
Compatibilidad de Navegadores
| Característica | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Soporte Básico | 18.0 (18.0)[1] | 21.0-webkit | 11 | 12.10 | 6.1-webkit |
| < 0 animate | 32.0 (32.0)[2] | 49.0 | ? | No support | No support |
| Característica | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Soporte Básico | 18.0 (18.0)[1] | ? | No support | 12.10 | No support |
| < 0 animate | 32.0 (32.0)[2] | ? | ? | No support | No support |
[1] Firefox soporta sólo Caja flexible de línea simple hasta Firefox 27. Para activar el soporte de caja flexible para Firefox 18 y 19, el usuario tiene que cambiar en preferencias about:config el layout.css.flexbox.enabled en true.
Además del soporte sin prefijo, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) añade soporte para un prefijo -webkit en versión porpietaria por razones compatibilidad web bajo la preferencia layout.css.prefixes.webkit, por defecto en false. Desde Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) la preferencia por defecto está en true.
[2] Antes de Firefox 32, Gecko no era capaz de animar los valores de inicio o parada en 0(Spec, Demo).