La flex-growpropiedad es una subpropiedad del módulo Diseño de caja flexible.
Define la capacidad de un artículo flexible para crecer si es necesario. Acepta un valor sin unidades que sirve como proporción. Dicta la cantidad de espacio disponible dentro del contenedor flexible que debe ocupar el artículo.
Por ejemplo, si todos los elementos se han flex-growestablecido en 1, cada niño tendrá el mismo tamaño dentro del contenedor. Si le dieras a uno de los niños un valor de 2, ese niño ocuparía el doble de espacio que los demás.
Sintaxis
flex-grow: .flex-item ( flex-grow: 2; )Manifestación
La siguiente demostración muestra cómo se calcula el espacio restante de acuerdo con los diferentes valores de flex-grow(consulte CodePen para una mejor comprensión).
Todos los elementos tienen un flex-growvalor de 1 excepto el tercero que tiene un flex-growvalor de 2. Esto significa que cuando se distribuye el espacio disponible, el tercer elemento flexible tendrá el doble de espacio que los demás.
Soporte del navegador
- (moderno) significa la sintaxis reciente de la especificación (p
display: flex;. ej. ) - (híbrido) significa una sintaxis no oficial extraña de 2011 (p
display: flexbox;. ej. ) - (antiguo) significa la sintaxis antigua de 2009 (p
display: box;. ej. )
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| 21+ (moderno) 20- (antiguo) | 3.1+ (antiguo) | 2-21 (antiguo) 22+ (nuevo) | 12.1+ (moderno) | 10+ (híbrido) | 2.1+ (antiguo) | 3.2+ (antiguo) |
El navegador Blackberry 10+ admite la nueva sintaxis.
Para obtener más información sobre cómo mezclar sintaxis para obtener la mejor compatibilidad con el navegador, consulte este artículo (Trucos CSS) o este artículo (DevOpera).