彈性布局（display flex）

一、flex 布局

flex是flexible box的縮寫，意為「彈性布局」，用來為盒狀模型提供最大的靈活性，旨在提供乙個更有效地布局，對齊方式，並且能夠使容器中的子元素大小未知或動態變化情況下仍然能狗狗分配好子元素之間的空間。

flex布局的主要思想是使父容器能夠調節子元素的高度/寬度（和排列順序），從而能夠給最好地填充可用空間（主要是為了適應所有型別的顯示裝置和螢幕尺寸）。flex容器能夠方法子元素使之盡可能填充可用空間，課可用收縮子元素使之不溢位。

最重要的是，flexbox布局與方向無關，不同於常規布局（基於垂直的塊（block）和基於水平的內聯（inline））。雖然傳統布局適用於頁面，但它們對於大型或複雜的應用程式布局來說缺乏靈活性（特別是在改變方向，調整大小，拉伸，收縮等方面）。

二、基本概念

採用flex布局的元素，稱為flex容器（flex container），簡稱「容器」。它的所有子元素自動稱為容器成員，稱為flex專案（flex item），簡稱「專案」。

三、容器的屬性

space-around和space-between 這兩個值的區別不能很直觀的理解。

space-between 是兩端對齊，使每個矩形子元素（flex項）之間的間隔是相等的，但兩端的矩形子元素（flex項）不會和容器之間產生間隔。

space-around則會在每個矩形子元素（flex項）的兩邊產生乙個相同大小的間隔，也就是說兩端的矩形子元素（flex項）和容器之間的間隔大小正好是兩個矩形子元素（flex項）之間間隔大小的一半（每個矩形子元素產生的間隔不會重疊，所以間隔程式設計兩倍）。

（注意對於align-items：stretch來說，必須將每乙個矩形子元素（flex項）的高度設定為auto，否則height屬性將會覆蓋該stretch）

對於align-items:baseline來說，要注意如果去掉段落標籤或者沒內容，矩形子元素（flex項）就會按照每個矩形的地步對齊，

為了更好的演示主軸和交叉軸的區別，讓我們結合justify-content和align-items，看看在flex-direction 兩個不同屬性值的作用下，軸心有什麼不同：

align-content屬性定義了多跟軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用