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

What this article shares with you is about what the elastic box in html5 is. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article. Let's take a look at it with the editor.

In html5, a resilient box is a layout that ensures that elements behave appropriately when pages need to adapt to different screen sizes and device types; the purpose of introducing resilient box layout is to provide a more efficient way to arrange, align, and allocate blank space for child elements in a container.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

What does an elastic box mean?

A resilient box (FlexibleBox or flexbox) is a layout that ensures that elements behave appropriately when the page needs to adapt to different screen sizes and device types.

The purpose of introducing the elastic box layout model is to provide a more efficient way to arrange, align and allocate blank space to the child elements in a container.

Many common and complex layout requirements can be met in a simple way. Its advantage is that developers only declare the behavior that the layout should have, and do not need to give a specific implementation. The browser is responsible for completing the actual layout. The layout model is supported in mainstream browsers.

Basic properties of the elastic box:

* * Elastic box cloth 'Bureau: display:flex; or display:inline-flex

For the difference between the two, please refer to the difference between display:block; and display:inline-block;, (can parent elements be displayed on one line)

The function of the elastic box: the child elements can be displayed on a line. The default x is the principal axis and y is the side axis (secondary axis).

So the child elements are displayed on a row by default, similar to the float:lef; convenient layout

When set to an elastic box:

1. Child elements are arranged on the principal axis by default

2. All child elements can set width and height; (similar to display:inline-block;)

3. When the parent element is an elastic box, all the child elements need to be centered up, down, left and right is margin:auto.

The effect on child elements when the elastic box is set:

1. The float and clear in the child element are invalid

2. The child element vertical:-align:; (vertical alignment of elements) is invalid.

Attributes added by the parent element (adding to the parent element, affecting the child element)

How to set the primary and secondary axes:

Flex-derection:row; horizontal spindle

Flex-derection:column; vertical spindle

Flex-derection:row-reverse; horizontal spindle reverse

Flex-derection:column-reverse; Vertical Spindle reverse

Whether the child element wraps flex-wrap:

1. Wrap line feeds

2. No-warp: no line wrapping

3. Reverse line wrapping of wrap-reverse;

Abbreviation: flex-flow:; (setting spindle wrapping) (it is not recommended that this setting will affect the readability of the code)

Alignment of justify-content:; child elements on the principal axis: add to the parent element

1. Flex-start; start position

2. Flex-end; end position

3. The middle position of center;

4. Fully automatic allocation of space-around;

5. Space-between; is aligned at both ends and automatically assigned in the middle.

Alignment of align-items:; child elements on the side axis (add to parent element)

1. Flex-start; start position

2. Flex-end; end position

3. The midpoint of center;

4. Baseline; baseline alignment

5. Stretch; default position alignment

Align-content:; multiline elements are only valid if they are aligned on the side axis.

1. Align the top of flex-start;

2. Align at the bottom of flex-end;

3. Center; middle alignment

4. Fully automatic allocation of space-around;

5. Space-between; is aligned at both ends and automatically assigned in the middle.

6. Stretch; default position alignment

Project (child element alignment) (add to child element)

Alignment of align-self:; child elements on the side axis

Flex-start start position

Flex-end end position

Center in the middle

Stretch stretch (this element does not set width or height)

Auto default value

Note: if the parent element has this property setting, the alig-items:; property setting is inherited

The above is what the elastic box in html5 is, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please 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.