Home > Article > Web Front-end > Detailed explanation of the box-ordinal-group attribute of the box's layout position

Detailed explanation of the box-ordinal-group attribute of the box's layout position

云罗郡主forward: 2018-10-23 15:39:093209browse

This article brings you a detailed explanation of the box-ordinal-group attribute of the layout position of the box. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

We know that the box-direction attribute can set the order of the "child elements" inside the flexible box. In the CSS3 flexible box model, we can also use the box-ordinal-group attribute to set the "accurate" display position of each "child element" in the flexible box.

The value of the box-ordinal-group attribute is a natural number, starting from 1, used to set the position number of child elements. The distribution of child elements will be arranged from small to large according to this attribute value. By default, child elements will be arranged based on the element's position.

Note that for sub-elements that do not specify a box-ordinal-group attribute value, the serial number of the sub-element defaults to 1. And child elements with the same serial number will be arranged in the order they are loaded in the HTML document.

Let’s look at an example first, and then review these knowledge points:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-ordinal-group属性</title>
    <style type="text/css">
        body
        {
            display:-webkit-box;
            -webkit-box-orient:horizontal;   /*定义盒子元素内的元素从左到右流动显示*/
        }
        div{height:100px;line-height:100px;}
        #box1
        {
            background:red;
            -webkit-box-ordinal-group:2;
        }
        #box2
        {
            background:blue;
            -webkit-box-ordinal-group:3;
        }
        #box3
        {
            background:yellow;
            -webkit-box-ordinal-group:1;
        }
    </style>
</head>
<body>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
    <div id="box3">盒子3</div>
</body>
</html>

Detailed explanation of the box-ordinal-group attribute of the boxs layout position

The above is a detailed explanation of the box-ordinal-group attribute of the layout position of the box All introduced, if you want to know more about CSS3 video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of Detailed explanation of the box-ordinal-group attribute of the box's layout position. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:lvyestudy.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to lay out flexbox? Detailed tutorialNext article：How to lay out flexbox? Detailed tutorial

See more

Detailed explanation of the box-ordinal-group attribute of the box's layout position

Related articles