如何使用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>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c57353.shtml