几个重要的概念 主轴、主轴开始点、主轴结束点、 交叉轴
容器（display:flex的元素上）属性
column就时纵向从上到下显示 column-reverse 就是纵向从下到上显示
不换行，如果超出宽度，自动整体缩减. wrap换行，wrap-reverse 翻转换行。注意换行和主轴方向有关
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .container { margin: 10px; display: flex; flex-direction:; flex-wrap:; border: 1px solid red; width: 500px; } .item { border: 1px solid green; width: 98px; height: 50px; } .container2 { margin: 10px; display: flex; flex-direction: row; flex-wrap: wrap-reverse; border: 1px solid red; width: 500px; } .item2 { border: 1px solid green; width: 100px; height: 60px; } .container3 { margin: 10px; display: flex; flex-direction: column; flex-wrap: wrap; border: 1px solid red; width: 500px; height: 200px; } .item3 { border: 1px solid green; width: 100px; height: 60px; } </style> </head> <body> <div class="container"> <div class="item"> 默认主轴方向row 其他的有row-reverse colum colum-reverse </div> <div class="item"> 默认不换行 </div> <div class="item"> 可以在container 上设置换行 </div> <div class="item"> 4 </div> <div class="item"> 5 </div> <div class="item"> 6 </div> </div> <div class="container2"> <div class="item2"> 换行 和 主轴方向有关系 </div> <div class="item2"> 默认时row </div> <div class="item2"> 3 </div> <div class="item2"> 4 </div> <div class="item2"> 5 </div> <div class="item2"> 6宽度不够 换行到第一行 </div> </div> <div class="container3"> <div class="item3"> 1 </div> <div class="item3"> 2 </div> <div class="item3"> 3 </div> <div class="item3"> 4 </div> <div class="item3"> 5 </div> <div class="item3"> 6 </div> </div> </body> </html>
效果
原文：http://www.cnblogs.com/tenyear/p/flex3.html