在CSS3中,我们可以使用order属性来定义弹性盒子内部“子元素”的排列顺序。

语法:

order:整数

说明:

order属性取值是一个正整数,即1、2、3等。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #wrapper { display:flex; width:200px; height:150px; } #box1,#box2,#box3 { height:150px; line-height: 150px; text-align: center; font-size:30px; color:white; } #box1 { background:red; flex: 1; order:2; } #box2 { background:blue; flex: 2; order:3; } #box3 { background:orange; flex: 3; order:1; } </style> </head> <body> <div id="wrapper"> <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div> </div> </body> </html>

浏览器预览效果如下图所示。