How does HTML layout web pages through flex?
Today, the editor will share with you the relevant knowledge of how HTML carries on the web page layout through flex, the content is detailed, the logic is clear, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.
Flex layout
Known as the "elastic box model", when the parent container sets display:flex, the child elements automatically become its members, the container defaults to two axes: the horizontal principal axis and the vertical cross axis, and the items are arranged along the principal axis by default.
Some properties of the flex container (parent container):
Flex-direction: determines the direction of the spindle (that is, the direction of the arrangement of items)
Flex-wrap: how to change lines if one axis doesn't fit
Flex-flow: shorthand for flex-direction attribute and flex-wrap attribute. The default value is rownowrap.
Justify-content: defines the alignment of the project on the spindle
Align-items: defines how the project is aligned on the cross axis
Align-content: defines the alignment of multiple axes. If the project has only one axis, this property does not work
Case study
Flex realizes horizontal and vertical centering
* {
Margin:0
Padding:0
}
Html {
Width:100%
Height:100%
}
Body {
Display:flex
Width:100%
Height:100%
Background:#eee
Justify-content:center
Align-items:center
}
.box {
Width:200px
Height:200px
Background:pink
}
These are all the contents of the article "how to layout HTML pages through flex". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
