How to use the align-content attribute in css
This article mainly introduces how to use the align-content attribute in css. It is very detailed and has a certain reference value. Friends who are interested must finish it!
Align-content attribute
The align-content property is used to modify the behavior of the flex-wrap property. Similar to align-items, but instead of setting the alignment of elastic elements, it sets the alignment of individual rows.
Grammar.
Align-content: flex-start | flex-end | center | space-between | space-around | stretch
Each value is resolved:
Stretch-default. The lines will stretch to take up the remaining space.
Flex-start-the lines are stacked at the start of the elastic box container.
Flex-end-the lines are stacked to the end of the elastic box container.
Center-the rows are stacked in the middle of the elastic box container.
Space-between-rows are evenly distributed in the elastic box container.
Space-around-rows are evenly distributed in the elastic box container, leaving half of the spacing between child elements and child elements at both ends.
The following example demonstrates the use of center:
Case study
. flex-container {
Display:-webkit-flex
Display: flex
-webkit-flex-wrap: wrap
Flex-wrap: wrap
-webkit-align-content: center
Align-content: center
Width: 300px
Height: 300px
Background-color: lightgrey
}
The above is all the content of the article "how to use the align-content 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!
