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

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.

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.