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

This article mainly introduces how to use the align-content attribute of CSS, which has a certain reference value, and interested friends can refer to it. I hope you can learn a lot after reading this article.

I. definition and use of CSSalign-content attributes

Definition: the align-content property aligns items in the container (vertical) when the items in the elastic container do not occupy all available space on the cross axis.

Function: sets how the items inside the free box are arranged vertically.

Condition: the property display:flex must be set on the parent element and line wrapping must be set for flex-wrap:wrap so that the setting of this property will work.

Setting: this property works on the items in its container, so you can set the parent element.

The value of align-content. You can use it as needed.

Stretch: stretched to fit the container (default).

Center: located in the center of the container.

Flex-start: at the beginning of the container.

Flex-end: at the end of the container.

Space-between: located in a container with white space between the lines.

Space-around: located in a container with white space before, between, and after each line.

Written as align-content:stretch | center | flex-start | flex-end | space-between | space-around

II. Analysis of align-content examples

Description: there are four small div inside a div outside. In order to see the effect clearly, set different colors to it, and then add align-content:center to the big div.

Let the div inside be centered in the vertical direction of the container. The code is as follows:

HTML section:

CSS section:

.box {

Width:100px

Height:300px

Border:1pxsolid#c3c3c3

Display:-webkit-flex

Display:flex

-webkit-flex-wrap:wrap

Flex-wrap:wrap

-webkit-align-content:center

Align-content:center

}

.boxdiv {

Width:100px

Height:50px

}

Thank you for reading this article carefully. I hope the article "how to use the align-content attribute of CSS" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.