聊聊 justify content 屬性

內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊。

該操作發生在彈性長度以及自動邊距被確定後。它用來在存在剩餘空間時如何加以分配，也會在發生內容溢位時影響專案的對齊。

注意：彈性布局中有兩個基本術語main axis和cross axis，一般情況下，我們可以把它們各自看作是螢幕上的行向和列向（但是嚴格講，這和寫模式以及彈性流方向有關）。

那麼main-start和main-end就可以分別被看作是彈性容器的左右邊。

justify-content語法如下：

justify-content: flex-start | flex-end | center | space-between | space-around

引數說明如下：

flex-start

彈性專案向行頭緊挨著填充。這個是預設值。第乙個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而後續彈性項依次平齊擺放。

flex-end

彈性專案向行尾緊挨著填充。第乙個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而後續彈性項依次平齊擺放。

center

彈性專案居中緊挨著填充。（如果剩餘的自由空間是負的，則彈性專案將在兩個方向上同時溢位）。

space-between

彈性專案平均分布在該行上。如果剩餘空間為負或者只有乙個彈性項，則該值等同於flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，然後剩餘的彈性項分布在該行上，相鄰專案的間隔相等。

space-around

彈性專案平均分布在該行上，兩邊留有一半的間隔空間。如果剩餘空間為負或者只有乙個彈性項，則該值等同於center。否則，彈性專案沿該行分布，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。

上圖很直觀的演示了以上5個取值的效果和差異。