How to use the flex attribute in css
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!
