CSS3 - flex flex-direction flex-wrap自我总结

看了不少文章，然后自己也总结了下，之前对于 flex里面的flex-direction一直不理解，分什么主轴，什么交叉轴，一头雾水，所以不能只是看，学习程序一定要自己敲，自己总结，先看图：

关键点是，找到开始点，然后元素的流向，上图只是 row  为主轴的情况，以此类推flex-direction为column的时候

 

重点是，如何找1的位置，确定了主轴的方向和交叉轴的方向，那么1的位置也确定了

主轴方向判断步骤如下：

如果是row,主轴是X轴，至于是从左往右，还是右往左，就看有没有reverse.

flex-direction : row ; //主轴从左往右

flex-direction: row-reverse;//主轴从右往左

如果是column，主轴是Y轴，至于是从上往下，还是从下往上，就看有没有reverse

flex-direction: column;//主轴从上往下

flex-direction:column-reverse;//主轴从下往上

交叉轴方向判断如下：

如果flex-wrap换行模式是空的，也就是默认nowrap的话，就从主轴直接排下来就行了，放不下的就隐藏掉了

总结出一个通用的方法来判断交叉轴

如果主轴是X轴，那么交叉轴是Y轴，反之如果主轴是Y轴，那么交叉轴是X轴

例

flex-flow: row wrap; //flex-flow是flex-direction和flex-wrap的简写

其主轴就是X轴，默认是从左往右，交叉轴要么是从上往下，要么是从下往上。 交叉轴的起点是以主轴的起点为起点，如果主轴是X轴，方向是从左往右，那么交叉轴默认是从上往下的。但是如果flex-wrap为wrap-reverse的话，就不一样了，交叉轴的方向就是从下往上了。

理解这一规律，弹性盒子布局的方向问题，我想怎么也不难了。