1、display flex | inline-flex;(適用於父類元素上)

(1) flex：將對象作為彈性伸縮盒顯示。

(2) inline-flex：將對象作為內聯塊級彈性伸縮盒顯示。

2、flex-flow (適用於父容器上)復合屬性。

(1) flex-direction（適用於父容器的元素上）：設置或檢索伸縮盒對象的子元素在父容器中的位置。

① row：橫向從左到右排列（左對齊），默認的排序方式。

② row-reverse：反轉橫向排列（右對齊）

③ column：縱向排列。

④ column：反轉縱向排列，從後往前排，最後一項在最上面。

(2) flex-warp （適用於父容器上） 設置或檢索伸縮盒對象的子元素超出父容器時是否換行。

① nowrap：當子元素溢出父容器時不換行。

② wrap：當子元素溢出父容器時自動換行。

③ wrap-reverse：當子容器溢出父容器時自動換行，方向同wrap反轉排序。

3、justify-content (適用於父容器上) 設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。

(1) flex-start：彈性盒子元素將向起始位置對齊。

(2) flex-end：彈性盒子元素將向結束位置對齊。

(3) center：彈性盒子元素將向中間位置對齊。

(4) space-between：彈性盒子元素會平均地分部在行裏。

(5) space-around：彈性盒子元素會平均地分部在行裏，兩端保留子元素與子元素之間間距大小的一般。

4、align-items （適用於父容器上）設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。

(1) flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。

(2) flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。

(3) center：彈性盒子元素在該行的側軸（縱軸）上居中放置。

(4) baseline：如彈性盒子的行內軸與側軸為同一條，則該值與‘flex-start’等效。其他情況下該值將與基線對齊。

5、align-self （適用於彈性盒模型子元素）設置或檢索彈性盒子元素自身在側軸（縱軸）方向上的對齊方式。

6、align-content （適用於父容器上） 設置或檢索彈性盒堆疊伸縮行的對齊方式。

7、order （適用於彈性盒模型容器子元素）用整數來定義排序順序，數值小的排在前面。可以為負值。

8、flex （適用於彈性盒模型子元素）復合屬性。設置或檢索伸縮盒對象的子元素如何分配空間。

（1）none：none關鍵字的計算值為：0 0 auto

（2）flex-grow flex-shrink flex-basis

（3）flex-grow根據彈性盒子元素所設置的擴展因子作為比率來分配剩余空間。

（4）flex-shrink 設置或檢索彈性盒子的伸縮比率。

（5）flex-basis

《1》auto：無特定寬度值，取決於其他屬性。

《2》用長度或百分比來定義寬度。不允許負值。

彈性布局屬性