How to use the flex-grow attribute in css

This article will explain in detail how to use the flex-grow attribute in css. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Definition and usage

The flex-grow property is used to set or retrieve the expansion ratio of the elastic box.

Note: if the element is not an element of the elastic box object, the flex-grow attribute has no effect.

Default value: 0

Inheritance: no

Animated: yes.

Version: CSS3

JavaScript syntax:

Object.style.flexGrow= "5"

CSS syntax:

Flex-grow:number | initial | inherit

Attribute value

Number a number that specifies the amount by which the project will be expanded relative to other flexible projects. The default value is 0.

Initial sets this property to its default value.

Inherit inherits this attribute from the parent element.

Case study

Make the second element three times as wide as the other elements:

# main {

Width:350px

Height:100px

Border:1pxsolid#c3c3c3

Display:flex

}

# maindiv:nth-of-type (1) {flex-grow:1;}

# maindiv:nth-of-type (2) {flex-grow:3;}

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

# maindiv:nth-of-type (4) {flex-grow:1;}

# maindiv:nth-of-type (5) {flex-grow:1;}

Note: the flex-grow attribute is not supported in InternetExplorer10 and earlier browsers.

Note: Safari6.1 and later versions support this property through the-webkit-flex-grow attribute.

This is the end of this article on "how to use flex-grow attributes in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.