css中box-ordinal-group属性怎么用

发布时间:2022-03-03 11:09:03 作者:小新
来源:亿速云 阅读:116

这篇文章主要为大家展示了“css中box-ordinal-group属性怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css中box-ordinal-group属性怎么用”这篇文章吧。

我们知道box-direction属性可以设置弹性盒子内部“子元素”的排列顺序。在CSS3弹性盒子模型中,我们还可以使用box-ordinal-group属性来设置每个“子元素”在弹性盒子中的“准确”显示位置。

box-ordinal-group属性取值是一个自然数,从1开始,用来设置子元素的位置序号。子元素的分布将根据这个属性值从小到大进行排列。在默认情况下,子元素将根据元素的位置进行排列。

注意,对于没有指定box-ordinal-group属性值的子元素,则该子元素的序号默认都为1。并且序号相同的子元素将按照它们在HTML文档中加载的顺序进行排列。

我们先看个例子,再来回顾一下这些知识点:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<!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>

css中box-ordinal-group属性怎么用

以上是“css中box-ordinal-group属性怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. css box-ordinal-group属性使用
  2. css中marginbottom属性怎么用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:css中的flex属性怎么用

下一篇:如何查看CSS计算每一个样式属性的权重

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》