1111
2222
3-垂直居中
justify-content:center;决定空间内属性布局;
2323 .box2{margin:auto; margin-top:10px;display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; width:980px; height:680px; border:4px solid #f00;} .a1{width:98px;height:300px;background:#ccc;order:10;}
.a2{width:98px;height:300px;background:#ddd;order:9;}
.a3{width:98px;height:300px;background:#eee;order:8;}
.a4{width:98px;height:300px;background:#cfffcc;order:7;}
.a5{width:98px;height:300px;background:#bbb;order:6;}
.a6{width:98px;height:300px;background:#f00;order:5;}
.a7{width:98px;height:300px;background:#000;order:4;}
.a8{width:98px;height:300px;background:#ffc;order:3;}
.a9{width:98px;height:300px;background:#00c; order:2;}
.a10{width:98px;height:300px;background:#f88; order:1;}
在线教程:http://blog.csdn.net/lzx_victory/article/details/53080861
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
1
2
3
4
5
6
7
8
9
10
222
111