開始

最近研究一個框架，剛好裡面也實現了flex佈局的演算法，雖然平時也用到flex做一些簡單的佈局，但是深入到演算法實現的時候，發現自己對flex某些概念倒是沒那麼清晰，立馬谷歌把幾個flex涉及的屬性都好好理清一下，權當一個自我梳理。

main-axis和cross-axis

main其實跟flex-direction這個屬性相當有關係，關係如下圖：

根據flex-direction的值不同，main-axis方向相應也不同。
既然有方向這個概念，這個時候justify-content屬性（justify-content主要負責調整main-axis上元素的佈局），在取值為flex-start和flex-end時就要注意了。
而cross-axis是垂直於main-axis的。

• 當flex-direction取值為row或者row-reverse時cross-axis方向是由下往上。

• 當flex-direction取值為column或者column-reverse時cross-axis方向是由左往右。

align-items和align-content

首先align-item和align-content都是應用在cross-axis上的元素。
flex佈局預設情況下元素是不會換行的，這個時候就是align-items起作用的時候，但是當有多行的情況時，align-items的表現就有點令人失望了。例如你期待是這樣一個網格的佈局：

但是實際會是這樣的效果：

這個網格怎麼看都怪怪的有木有。
這個時候就是align-content屬性大顯神威的時候了，align-content主要應用在存在多行的場景下，但是隻有單行的時候，它就失去作用了。

flex-basis

flex-basis可以說是一個並太起眼的屬性但是確有很大的意義。
flex-basis的作用，主要在與flex計算剩餘空間時起作用，如果你設定flex-basis為一個明確的大小，在計算剩餘空間時會先去減去這一部分，然後根據剩餘空間為正或為負去應用flex-grow或flex-shrink進行縮放。
當flex-basis是預設值auto時，flex-basis等同於元素的自身寬度（例如你設定了width就是該設定的值，如果width也為auto，那就等同於元素內容的寬度）。
當flex-basis為0時，就等同於完全依賴於flex-grow的比例和剩餘空間的大小去分配。

額外點

計算剩餘空間時，padding, margin, border和flex-basis是事先扣除，再根據flex-grow去分配空間的。
justify-content為space-around時，元素和父元素的間隙是元素與元素間的間隙的一半。