The role of the align-content attribute in css
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!
