
La propiedad flex-grow CSS establece el parámetro de estiramiento para un elemento flexible y define cuánto espacio debe ocupar el elemento dentro del contenedor flexible.
Funciones flex-grow css
Valor inicial | 0 |
---|---|
Aplicado a | Elementos flexibles. |
Heredable | No |
Móvil | Sí |
Valor calculado | Como se especificó. |
/* <número> valores numéricos */ flex-grow: 3; flex-grow: 0.6; /* valores globales */ flex-grow: inherit; flex-grow: initial; flex-grow: unset;
Ejemplos y aplicaciones en código
En el siguiente ejemplo, definimos la expansión de los elementos A, B, C y F usando la regla flex-grow: 1
, mientras que la expansión de los elementos D y E es igual a 2
:
<div id="content"> <div class="box" style="background-color: salmon;"> A </div> <div class="box" style="background-color: lightblue;"> B </div> <div class="box" style="background-color: gold;"> C </div> <div class="box1" style="background-color: crimson;"> D </div> <div class="box1" style="background-color: lightgreen;"> E </div> <div class="box" style="background-color: cadetblue;"> F </div> </div>
Código CSS:
#content { display: flex; } div { padding: 0.25em; } .box { flex-grow: 1; border: 3px solid rgba(0,0,0,.2); } .box1 { flex-grow: 2; border: 3px solid rgba(0,0,0,.2); }
Soporte de navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 29,0 | 20,0 | 11 | 12,5 | 9.0 |
Las versiones anteriores de algunos navegadores (como Chrome, IE y Safari) admitían flexbox pero con un uso anterior ( -webkit-
o -ms-
).
Características general
La propiedad acepta flex-grow
un valor único, que es un número sin uno.
<number>
Un entero positivo que especifica qué tan extensible es uno de los elementos flexibles en relación con el resto de los elementos flexibles, el valor predeterminado es 0
.
Estructura flex-grow css
flex-grow: <number>;
Consulte también
- Página de sub-propiedades que esta conjuntos de propiedades son:
flex-basis
,flex-direction
,flex-flow
,flex-shrink
yflex-wrap
. - La página de cada una de las propiedades
width
,height
que se encarga de configurar las dimensiones del elemento. - La página de propiedades
position
que describe cómo se debe colocar el elemento en el documento.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS