Flex布局部分屬性困惑解析

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

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

根據flex-direction的值不同，main-axis方向相應也不同。

既然有方向這個概念，這個時候justify-content屬性（justify-content主要負責調整main-axis上元素的布局），在取值為flex-start和flex-end時就要注意了。

而cross-axis是垂直於main-axis的。

首先align-item和align-content都是應用在cross-axis上的元素。

flex布局預設情況下元素是不會換行的，這個時候就是align-items起作用的時候，但是當有多行的情況時，align-items的表現就有點令人失望了。例如你期待是這樣乙個網格的布局：

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

這個網格怎麼看都怪怪的有木有。

這個時候就是align-content屬性大顯神威的時候了，align-content主要應用在存在多行的場景下，但是只有單行的時候，它就失去作用了。

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時，元素和父元素的間隙是元素與元素間的間隙的一半。