[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/es/docs/Web/CSS/Reference/Properties/flex-grow [Back]  [Original]

flex-grow - CSS | MDN

Esta pgina ha sido traducida del ingls por la comunidad. Aprende ms y nete a la comunidad de MDN Web Docs.

View in English Always switch to English

flex-grow

Baseline Widely available *

This feature is well established and works across many devices and browser versions. Its been available across browsers since septiembre de 2015.

* Some parts of this feature may have varying levels of support.

Resumen

La propiedad flex-grow de CSS especifica el factor de crecimiento de un elemento flexible (que tiene asignado display:flex), en su direccin principal. El factor de crecimiento especifica qu cantidad del espacio restante dentro del contenedor flexible, debera ocupar el item en cuestin.

La direccin principal puede ser la altura o el ancho del elemento, dependiendo del valor de flex-direction.

El espacio restante es el tamao del contenedor flexible menos el tamao de todos los elementos flexibles juntos. Si todos los tems dentro del contenedor tienen el mismo factor de crecimiento, todos los elementos reciben la misma cantidad del espacio restante. De lo contrario, el espacio restante se distribuye en funcin de los diferentes factores de crecimientos de cada item.

Valor inicial0
Applies toflex items, including in-flow pseudo-elements
Heredableno
Valor calculadocomo se especifica
Animation typea number

Ver Usando las cajas flexibles en CSS para ms propiedades e informacin.

In this article

Sintaxis

css
/* <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 vlidos.

Sintaxis formal

flex-grow = 
<number [0,]>
Esta sintaxis refleja el estndar ms reciente segn CSS Flexible Box Layout Module Level 2. Es posible que no todos los navegadores hayan implementado todas las partes. Consulte Compatibilidad del navegador para obtener informacin de soporte.

Ejemplo

HTML

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" >A</div>
  <div class="box" >B</div>
  <div class="box" >C</div>
  <div class="box1" >D</div>
  <div class="box1" >E</div>
  <div class="box" >F</div>
</div>

CSS

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, 0.2);
}

.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

Resultado

Especificaciones

Specification
CSS Flexible Box Layout Module Level 1
# flex-grow-property

Compatibilidad con navegadores

Ver tambin


Web Proxy Viewer  |  New URL  |  Original Page