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

This article mainly introduces the HTML Flex layout method has what related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have some gains after reading this HTML Flex layout method, let's take a look at it.

Detailed summary of Flex layout

Flex layout (flexible layout, flexible layout) is currently the most widely used layout scheme in web development.

Two important concepts:

The element that opens the flex layout is called flex container

The direct child element in flex container is called flex items

Set the display property to flex or inline-flex to become flex container:

Flex: make flex container exist at the block level

Inline-flex: causes the flex container to exist at the inline level

2.flex layout model

When the element opens the flex layout, it is laid out along two axes.

Principal axis (main axis): axis that extends in the direction in which the flex element is placed

Cross axis (cross axis): axis perpendicular to the direction in which the flex element is placed

Main start and main end: start position and end position of the spindle, respectively

Cross start and cross end: start position and end position of the cross axis, respectively

Main size and cross size: the size of the spindle and the size of the cross axis respectively

This is the end of the article on "what are the methods of HTML Flex layout?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what are the methods of HTML Flex layout". If you want to learn more knowledge, you are welcome to follow 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.