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屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
注：專案屬性的全面理解較為複雜，可以參考文章：
display flex彈性布局
display flex 火狐支援無字首，谷歌和opera支援 webkit 字首寫法，比較適合移動端開發使用 例子 1 23header header a 注釋 display屬性設定flew，所有子元素都會自動變成伸縮專案，預設是橫向排列，若flew flow值設為column，變為縱向排列，f...
display flex 彈性布局
設為flex布局以後，子元素的float clear和vertical align屬性將失效 常用 display flex justify content center 橫向居中 align items center 縱向居中 一 flex direction 容器內元素的排列方向 預設橫向排列 ...
彈性布局（display flex）
一 flex 布局 flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，旨在提供乙個更有效地布局，對齊方式，並且能夠使容器中的子元素大小未知或動態變化情況下仍然能狗狗分配好子元素之間的空間。flex布局的主要思想是使父容器能夠調節子元素的高度 寬度 和排列順序 ...