Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use the flex attribute in css. It is very detailed and has a certain reference value. Friends who are interested must finish it!

Flex

The flex attribute is used to specify how the elastic child element allocates space.

Grammar.

Flex: auto | initial | none | inherit | [flex-grow] | | [flex-shrink] | | [flex-basis]

Each value is resolved:

Auto: calculated value is 1 1 auto

Initial: calculated value is 0 1 auto

None: the calculated value is 0 auto

Inherit: inheriting from parent element

[flex-grow]: defines the expansion ratio of the elastic box element.

[flex-shrink]: defines the shrinkage ratio of elastic box elements.

[flex-basis]: defines the default datum value of the elastic box element.

In the following example, the first elastic subelement takes up 2 beat 4, and the other two take up 1 prime 4 each:

Case study

. flex-item {

Background-color: cornflowerblue

Margin: 10px

}

.item1 {

-webkit-flex: 2

Flex: 2

}

.item2 {

-webkit-flex: 1

Flex: 1

}

.item3 {

-webkit-flex: 1

Flex: 1

}

The above is all the content of the article "how to use the flex attribute in css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.