What are the advantages of HTML5 flexible layout?-Front-end Q&A-php.cn

What are the advantages of HTML5 flexible layout?

青灯夜游

Release： 2021-03-23 14:18:08

Original

2870 people have browsed it

HTML5 flexible layout is used to provide maximum flexibility for the box model. The advantage is that it is easy to use and it is easy to achieve a certain layout effect according to flex rules. Any container can be designated as Flex layout.

What are the advantages of HTML5 flexible layout?

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

Flexible layout (Flexible Box or flexbox) is a layout method that ensures that elements have appropriate behavior when the page needs to adapt to different screen sizes and device types.

The purpose of introducing the flexible box layout model is to provide a more efficient way to arrange, align and allocate empty space to sub-elements in a container.

Advantages and disadvantages of flex layout:

The advantage is that it is easy to use and it is easy to achieve a certain layout effect according to flex rules.

The disadvantage is: the browser compatibility is relatively poor and can only be compatible with ie9 and above.

[Recommended tutorial: CSS video tutorial]

Flexible box content

Flexible box by It is composed of Flex container and Flex item.

A flexible container is defined as a flexible container by setting the value of the display property to flex or inline-flex.

The flexible container contains one or more flexible sub-elements.

Note: The outside of the flexible container and inside the flexible sub-element are rendered normally. The flex box only defines how the flex child elements are laid out within the flex container.

Flexible sub-elements are usually displayed in one line within the flexible box. By default there is only one row per container.

The following elements show the flexible sub-elements displayed in a row, from left to right:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FLEX</title>
    <style>
        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 1200px;
            height: 640px;
            background-color: lightsteelblue;
        }
        .flex-container .flex-item {
            width: 320px;
            height: 240px;
            margin: 10px;
            background-color:lightsalmon;
        }
    </style>
</head>
<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

Copy after login

What are the advantages of HTML5 flexible layout?

Common properties of flexible boxes

##flex-directionSpecify Arrangement of child elements in a flexible containerflex-wrapSet whether to wrap the child elements of the flexible box when they exceed the parent containerflex-flowAbbreviation for flex-direction and flex-wrapalign-itemsSet the flex box element on the side axis (vertical axis) directionalign-contentModify the behavior of the flex-wrap attribute, similar to align-items, but instead of setting the alignment of child elements, Set row alignmentjustify-contentSet the alignment of the flexible box element in the main axis (horizontal axis) direction

Attribute	Description

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of What are the advantages of HTML5 flexible layout?. For more information, please follow other related articles on the PHP Chinese website!