<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="box"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">-1</div> <div class="item item5">-3</div> <div class="item item6">0</div> </div> <span class="test"></span> </body> </html>
.box { width:400px; height:104px; border: 1px solid #000000; display: -webkit-flex; display: flex; /*float, clear, vertical-align失效*/ /* flex-direction: row; flex-wrap: wrap; */ /*flex-flow是上面两个的合体*/ flex-flow: row wrap; /*主轴*/ justify-content: space-around; /*交叉轴*/ align-items: center; /*多轴*/ align-content: center; } .box .item { width: 50px; height: 50px; border:1px solid pink; font-size: 16px; order:2; /*空间不够的时候，项目等比缩小*/ flex-shrink: 1; } .box .item3 { /*占据两份*/ flex-grow: 2; align-self: flex-end; } .test { /*内联元素也可以做flex布局*/ display: -webkit-inline-flex; display: inline-flex; }
运行结果：
