display:flex;
flex-wrap:nowrap |wrap
flex-direction:靈活項目的方向。 row 水平顯示 | row-reverse 反向水平顯示 | column 單行顯示 | column-revers 反向單行顯示
flex-flow是flex-direction和flex-wrap的縮寫
1 | flex-flow: flex-direction flex-wrap; |
justify-content:水平控制Flex「水平對齊」的位置:flex-start 開始| flex-end | center | space-between ｜space-around
＃flex-start:起點
＃flex-end：終點
＃center：置中
＃space-between：:是平均分配「元素」位置，但左右兩側會貼齊主軸的起點、終點
＃space-around:是平均分配「元素」位置，但左右兩側的間距會較小 | Space-evenly是「元素」和「左右兩側」的間距皆相同;
align-item:設置對像是行內成員，控制「垂直對齊」的位置:stretch | flex-start | flex-end | center | baseline;
設置對像是行內成員，該屬性可以控制彈性容器中成員在當前行內的對齊方式。當成員設置了align-self 屬性時，父容器的 align-items 值則不再對它生效；行內成員會在其邊界盒正交軸上被居中（如果行正交尺寸小於行內成員尺寸，行內成員將會在正交軸兩方向等量溢出）
align-content:align-content是用來控制Flex的「行」在「水平方向」的對齊位置一定要設flex-wrap:wrap因為它是控制「行」，一定要有多行才能觸發
所有行被集中(擠)在彈性容器（正交軸）中間。它們彼此之間齊平，並且跟彈性盒子正交起始邊界的空白與跟彈性盒子正交結束邊界的空白相等。 （如果溢出空白為負數，所有行將會在正交軸兩方向等量溢出）鏈接。 ）
align-self:針對「單一」
order:order預設值為0,重新定義內元件的排列順序，順序會依照數值的大小排列
#flex
flex 是縮寫，裡面依序包含三個屬性 flex-grow、flex-shrink 和 flex-basis。
1 | flex:flex-grow | flex-shrink | flex-basis |
flex-grow:屬性用於設置或檢索彈性盒子的擴展比率，依照設定”比例分配剩餘空間”，預設值爲 0;
1 | flex-grow: number; |
flex-shrink 元件的收縮性:按比例分配剩餘空間, 元件的伸展性，是一個數值，當空間分配還不足時的當前元件的收縮性，預設值為 0，如果設置為 0 則不會縮放。
flex-basis 預設值爲 auto，表示其預設分配到的空間，與 width 很像，但優先程度較高：。
- number:一個長度單位或者一個百分比，規定靈活項目的初始長度。
- auto:默認值。長度等於靈活項目的長度。如果該項目未指定長度，則長度將根據內容決定。
1 | flex-basis: number|auto|initial|inherit; |