flex 布局属性的运用

随着浏览器对css3属性的支持，flex布局运用的越来越多。今天，简单的说下flex的几个常用属性之间的关系。

flex-direction

flex-direction 主要有四个属性值。 row row-reverse column column-reverse
flex 布局的方向。垂直和水平。reverse 为取反。但是 reverse 后，水平和垂直方向上有些不用，水平上方向reverse后，会距离左边有一段距离。而垂直方向上却没有，根本
原因是 外面的盒子，需要设置宽高。

主轴、交叉轴

很多人经常说说，主轴就是垂直方向，交叉轴是水平方向。其实，这种说法不准确。准确来说，主轴和交叉轴是根据 flex-direction 的 方向来定的。值为 row ，主轴就是水平方向，交叉轴就是 垂直方向。值为 column ，主轴是 垂直方向，交叉轴是水平方向。

justify-content、align-items

justify-content 就是根据主轴方向来的。align-items 是依据 交叉轴方向。

总结 : flex-direction 决定着主轴和交叉轴的方向，而 justify-content、align-items 又是依赖于主轴和交叉轴的方向。是一条环环相扣的链条。