flex是flexible box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。
採用flex布局的元素，稱為flex容器（flex container），簡稱"容器"。
屬性決定主軸的方向（即專案的排列方向）。它由四個屬性
row（預設值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
預設情況下，專案都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
nowrap（預設）：不換行
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
justify-content屬性定義了專案在主軸上的對齊方式。
align-items屬性定義專案在交叉軸上如何對齊。
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
其他屬性
flex屬性是flex-grow,flex-shrink和flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
常用flex-direction
row（預設值）：主軸為水平方向，起點在左端。
column：主軸為垂直方向，起點在上沿。
justify-content
flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。
align-items
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
align-content
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
參考：
初識 flex 布局
開啟彈性盒模式 display flex inline flex inline flex 行內彈性盒 1 設定 flex 縮放的 限定值 min width 最小值 min width 280px 最小寬度不能小於280px max width 最大值 max width 1280px 最大寬度不能...
flex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...
布局（flex布局）
彈性盒模型 display flex，排列方式根據主軸方向排列。子元素超出預設不換行，而是進行壓縮 flex direction 彈性盒模型主軸方向設定 row 預設 從左到右 側軸 從上到下 row reverse 從右到左 側軸 從上到下 column 從上到下 側軸 從左到右 column r...