flex佈局要求有父元素，子元素，並通過在父元素上設定彈性佈局讓子元素位置發生變化

主軸與交叉軸由flex-direction屬性來確定，該屬性的值決定了主軸是哪個方向

flex-direction 設定子元素的排序方式

• row: 行排列
• column: 列排列
• row-reverse: 行倒序排列
• column-reverse: 列倒序排列

justify-content 設定子元素的對齊方式（相對於主軸方向）

• flex-start: 對齊子元素頭部方向
• flex-end: 對齊子元素尾部方向
• space-between: 子元素左右對齊，其餘元素等距分佈（每個元素兩側距離相等）
• space-around: 子元素等距分佈（每個元素兩側距離相等）

align-items 設定子元素的對齊方式（相對於交叉軸方向）

• flex-start: 對齊子元素頭部方向
• flex-end: 對齊子元素尾部方向
• space-between: 子元素左右對齊，其餘元素等距分佈（每個元素兩側距離相等）
• space-around: 子元素等距分佈（每個元素兩側距離相等）
• stretch: 縱向拉伸子元素（只有在子元素未設定height屬性時有效）
• baseline: 子元素內文字底線對齊，以第一個子元素的文字為基準（設定後可能會導致子元素不對齊）