Atrybut flex-grow w CSS

Course recommendation:

Definition and usage

flex-grow property specifies the growth amount of the item relative to the rest of the flexible items in the same container.Note:

If the element is not a flexible item, the flex property is invalid.

See also: CSS Tutorial:

flex-shrink propertyCSS Flexible Box

flex-shrink propertyflex property

flex-shrink propertyflex-basis property

flex-shrink propertyflex-direction property

flex-shrink propertyflex-flow property

flex-shrink propertyCSS Reference Manual:

flex-wrap propertyHTML DOM Reference Manual:

flexGrow property

Example

Make the width of the second flexible item three times the width of the rest of the flexible items:
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}

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

Try it yourself

CSS syntax Descriptionflex-grow:

|initial|inherit;

Attribute value Value
Description number
Sets this property to its default value. See Numeric value, specifying the growth amount of this item relative to the rest of the flexible items. The default is 0. Sets this property to its default value. SeeAnimation-related properties
Inherits this property from its parent element. See initial Inherits this property from its parent element. SeeAnimation-related properties

inherit

Technical details Default value:
0 Inheritance:
No Animation production:Supported. See:Animation-related properties
. Version:
CSS3 JavaScript syntax:

object.style.flexGrow="5"

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0