这篇文章主要为大家展示了“怎么用CSS3中的属性box-direction控制布局顺序”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“怎么用CSS3中的属性box-direction控制布局顺序”这篇文章吧。
在CSS3弹性盒子模型中，我们可以使用box-direction属性来设置弹性盒子内部中“子元素”的排列顺序。
语法：box-direction
说明：box-direction属性取值如下：
normal正向显示（默认值）
reverse反向显示
举例：
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3box-direction属性</title>
<styletype="text/css">
body
{
display:-webkit-box;
-webkit-box-orient:horizontal;/*定义盒子元素内的元素从左到右流动显示*/
-webkit-box-direction:reverse;/*定义盒子元素内的元素反向显示*/
}
div{height:100px;line-height:100px;}
#box1{background:red;}
#box2{background:blue;}
#box3{background:yellow;}
</style>
</head>
<body>
<divid="box1">盒子1</div>
<divid="box2">盒子2</div>
<divid="box3">盒子3</div>
</body>
</html>
以上是“怎么用CSS3中的属性box-direction控制布局顺序”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
