注意在使用弹性盒模型的时候 父元素必须要加display:-webkit-box 或 display:-webkit-inline-box（为方便学习只写一种浏览器内核，项目中要写全）
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; } .box div{width:100px;height:100px;background:red;border:1px solid #fff;} .box div:nth-of-type(1){-webkit-box-ordinal-group:2;} .box div:nth-of-type(2){-webkit-box-ordinal-group:4;} .box div:nth-of-type(3){-webkit-box-ordinal-group:1;} .box div:nth-of-type(4){-webkit-box-ordinal-group:5;} .box div:nth-of-type(5){-webkit-box-ordinal-group:3;}
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; } .box div{height:100px;background:red;border:1px solid #fff;} .box div:nth-of-type(1){width:300px;} .box div:nth-of-type(2){-webkit-box-flex:2;} .box div:nth-of-type(3){-webkit-box-flex:3;} .box div:nth-of-type(4){-webkit-box-flex:4;} .box div:nth-of-type(5){-webkit-box-flex:5;} </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html>
html{height:100%;} body{height:100%;margin:0;} .box{height:100%; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:center; -webkit-box-align:center;} .box div{width:100px;height:100px;background:red;border:1px solid #fff;} </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html>
原文：http://www.cnblogs.com/guohuiru/p/5194793.html