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

This article mainly explains "the role of align-content attributes in css". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the role of align-content attributes in css".

Align-content

Function:

Sets how the items inside the free box are arranged vertically.

Conditions:

You must set the free box property display:flex;, on the parent element and set the arrangement to flex-direction:row; horizontally and wrap for flex-wrap:wrap; so that the setting of this property will work.

Set the object:

This property works on the project inside her container and sets the parent element.

Value:

Stretch: the default setting stretches the space occupied by each item in the container and fills it by adding space at the bottom of each item. The first item is arranged from the top of the container by default.

XML/HTML Code copies content to the clipboard

DOCTYPE=html >

Align-content

# father {

Width:200px

Display:flex

Flex-direction:row

Flex-wrap:wrap

Align-content:strech

Height:200px

Background-color:grey

}

.son1 {

Height:30px

Width:100px

Background-color:orange

}

.son2 {

Height:30px

Width:100px

Background-color:red

}

.son3 {

Height:30px

Width:100px

Background-color:#08a9b5

}

Q

W

E

E

E

Center: this cancels the gaps between projects and centers all projects vertically.

XML/HTML Code copies content to the clipboard

DOCTYPE=html >

About document element testing

# father {

Width:200px

Display:flex

Flex-direction:row

Flex-wrap:wrap

Align-content:center

Height:200px

Background-color:grey

}

.son1 {

Height:30px

Width:100px

Background-color:orange

}

.son2 {

Height:30px

Width:100px

Background-color:red

}

.son3 {

Height:30px

Width:100px

Background-color:#08a9b5

}

.son4 {

Height:30px

Width:100px

Background-color:#9ad1c3

}

.son5 {

Height:30px

Width:100px

Background-color:rgb (21123126)

}

Q

W

E

E

E

Flex-start: this cancels the gaps between items and places the items at the top of the container.

XML/HTML Code copies content to the clipboard

DOCTYPE=html >

About document element testing

# father {

Width:200px

Display:flex

Flex-direction:row

Flex-wrap:wrap

Align-content:flex-start

Height:200px

Background-color:grey

}

.son1 {

Height:30px

Width:100px

Background-color:orange

}

.son2 {

Height:30px

Width:100px

Background-color:red

}

.son3 {

Height:30px

Width:100px

Background-color:#08a9b5

}

.son4 {

Height:30px

Width:100px

Background-color:#9ad1c3

}

.son5 {

Height:30px

Width:100px

Background-color:rgb (21123126)

}

Q

W

E

E

E

Flex-end: this cancels the gaps between items and places them at the bottom of the container.

Align-content:flex-end

Space-between this aligns the project vertically at both ends. That is, the above item aligns to the top of the container and the bottom item aligns to the bottom of the container. Leave the same interval between each project.

Align-content:space-between

Space-around: this leaves the same length of white space at the top and bottom of each project, making the white space between projects twice as large as that of a single project.

Align-content:space-around

Inherit: causes this attribute of an element to inherit from its parent element.

Innitial: make the attribute of the element the default initial value.

Thank you for your reading, these are the contents of "the role of align-content attributes in css". After the study of this article, I believe you have a deeper understanding of the role of align-content attributes in css, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.