可以参考 阮一峰大神的文章 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
大家看起来如果感觉有点绕 可以简单的写个flex布局 实现一下 绝对会事半功倍的 本文也是适合了解过flex布局的人看，如何一点都不了解，请看阮大神的文章 然后在看这篇
由于之前用flex比较少，所以对这个了解也不多，最近在项目中全部使用flex布局之后，对 ‘轴’ 的理解加深了一些，所以分享出来给大家，一起学习，一起进步
flex中，有两种轴 一种是主轴，一种是交叉轴，我也是经常参考阮一峰大神的文章，里面对轴是这样写的
flex-direction是决定主轴的方向 下面 我们就要说重点了 
这个属性是定义项目(我个人还是喜欢叫子元素，下文都会称为子元素)在主轴的对齐方式，那么 何为主轴呢？ 主轴 顾名思义 就是由 flex-direction 这个属性的值所决定了 意思就是 主轴 会根据 你所设置flex-direction不同而不同 当你 flex-direction:row 时 他的主轴 就会是 横向的 也就是 justify-content 在我个人的理解中(也有可能不对，如果有错 请指出) justify-content 代表的是横轴 而align-items 所代表的是纵轴 当你的flex-direction:column 时 你的主轴方向就会变为纵向的 这时 你想用 justify-content 定义主轴的对齐方式 好像就不大管用了 因为 你的主轴方向现在是纵向 而控制纵轴的对齐方式是 align-items 这个属性 在你设置了 flex-direction:column 时 就成为了主轴， justify-content 反而成为了交叉轴 在我个人理解里 主轴和交叉轴不是固定的 而是由 flex-direction 属性的值所决定， 当你决定了 flex-direction 的方向时 你就应该知道 主轴和交叉轴发生了改变，当然 就算不理解主轴和交叉轴 也可以写 只不过是用笨一点的办法 align-items justify-content 属性都设为center 这时就会垂直水平居中 然后 你在根据自己想要的效果在慢慢调整 多更改几次 也会慢慢理解主轴和交叉轴的意思， 由于本人文笔不是很好 所以写的可能不太好 如果对看文章的你有帮助 那就太好了 ..
justify-content