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

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!

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.