Detailed explanation of the flexible box model of CSS3

Flexbox usually allows us to better manipulate the layout of its sub-elements, for example:

If the element container does not have enough space, we do not need to calculate the size of each element. width, you can set them on the same line;

You can quickly arrange them in a column;

You can easily align them to the left, right, middle, etc. of the container;

You can change their display order without modifying the structure;

If the element container setting percentage and the viewport size change, don't worry about not specifying the exact width of the element and breaking the layout, because each child element in the container can be automatically Allocate a proportion of the width or height of the container.

Highlights:

Width adaptive. Development is much more convenient and faster than table and float.

Note compatibility:

.nav{
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    width:100%;//火狐不加宽度是无效的
}
.nav a{
    display: block;
    height:40px;
    line-height: 40px;
    color:#fff;
    text-align: center;
    border:1px solid #fff;
    background: #f60;
    text-decoration: none;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
        -o-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

The above is the detailed content of Detailed explanation of the flexible box model of CSS3. For more information, please follow other related articles on the PHP Chinese website!