flex布局中flex-direction对justify-content(align-items)的影响

最近在自己写一些布局的东西，一直没有体会到flex的精髓，偶然才发现了自己一直理解错误，做此笔记。

前言

之前写flex布局的时候一直对align-items和justify-content的用法感觉到很困惑，很多时候它们的表现情况不如我所设想的那样，尤其是我在布局中采用了全局text-align:center后，出现了很多布局错误的情况，在某次调试总算发现了它们的真正用法。

内容

1.flex的主轴与交叉轴

在最开始的学习中，我一直认为主轴就是水平的，交叉轴就是垂直的
然而在flex的描述中，主轴是跟随着flex-direction的参数变化而变化的

2.flex-direction和align-items的使用

当flex-direction的属性为row(默认)的时候主轴为水平的轴，而当flex-direction的属性为column时，主轴则变为了垂直方向，
而justify-content和align-items的使用说明中只指明了主轴和交叉轴并没有讲述是水平或者垂直，所以当flex-direction为column时，justify-content的方向就变为了垂直的布局设定。align-items同理。

后话

这次的教训确实很大，因为我是在几乎把样式布局全写完后才发现这个问题，浪费了大量的时间，很多时候我们需要仔细的阅读技术文章，特别是互联网的新技术，如果是国外更新，最好是不要读翻译版的，多半会有些许的误会或者是误导。