可以參考 阮一峰大神的文章 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