What is CSS flex-grow attribute?

CSS Reference Manual
CSS Attributes

The best CSS flex-grow attribute Tutorial In 2024, In this tutorial you can learn Examples,Browser Support,Definition and Usage,CSS Syntax,Property Value,related articles,

CSS flex-grow attribute

Previous: CSS flex-flow properties

Next: CSS flex-shrink properties

CSS Reference

Examples

So that the second element is three times the width of the other elements:

div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}

Browser Support

Figures in the table represent the first browser to support the property version number.

Immediately following the digital -webkit-, -ms- or -moz- after the first version to support the prefix property.

Attributes
flex-grow	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

Definition and Usage

flex-grow attribute is used to set or retrieve the flexible pouch expansion ratio. .

Note: If theelement is not resilient element box object, the flex-grow property does not work.

Defaults:	0
inherit:	no
Can be animated:	Yes. Please refer to animation (Animatable) . try it
version:	CSS3
JavaScript syntax:	object .style.flexGrow = "5"try

CSS Syntax

flex-grow:number|initial|inherit;

Property Value

值	描述
number	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
initial	设置该属性为它的默认值。请参阅 initial 。
inherit	从父元素继承该属性。请参阅 inherit 。