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

This article mainly shows you "how to use the box-ordinal-group attribute in css", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use the box-ordinal-group attribute in css" this article.

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

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

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

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

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

twenty-six

twenty-seven

twenty-eight

twenty-nine

thirty

thirty-one

thirty-two

thirty-three

thirty-four

CSS3 box-ordinal-group attribute

Body

{

Display:-webkit-box

-webkit-box-orient:horizontal; / * defines the flow of elements within a box element from left to right * /

}

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

}

Box 1

Box 2

Box 3

The above is all the content of the article "how to use the box-ordinal-group attribute in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.