1.彈性盒子/伸縮盒子
如果要使用彈性盒子屬性，首先要將父級元素變成彈性盒子
Flex-direction 設置伸縮盒子的內部元素的排列方式
Row 從左到右安行排列
Column 從上到下按照列排列
Row-reverse 從右到左按照行排列
Column-reverse 從下到上按照列排列
Flex-shrink 設置彈性盒子的內部元素的收縮方式
注意：所有盒子的默認收縮方式都是1
Flex-grow 設置彈性盒子的擴展比例
注意：所有盒子的默認擴展比率爲0
Flex-basis 設置伸縮盒子內部元素的基準值
注意：所有元素默認伸縮基準值爲元素的寬度
Flex-wrap 設置伸縮盒子的子元素超出的處理方式
Nowrap 自動收縮子元素以適應盒子
Wrap 超出盒子換到下一行
Wrap-reverse 超出盒子換到上一行
Justify-content 設置伸縮盒子的子元素在水平方向的對齊方式
Flex-start 靠左對齊
Flex-end 靠右對齊
Center 居中對齊
Flex-between 兩端對齊
Flex-around 平均分佈
如果flex-between和flex-around這兩個屬性不起作用的話可以換成
Space-between和space-around
Align-items 設置伸縮盒子的子元素的排列方式
Flex-start 在伸縮盒子的左上角排列
Flex-end 在伸縮盒子的左下角排列
Center 在伸縮盒子的中間排列
Baseline 在伸縮盒子的左上角基線排列
Strecth 拉伸所有的子元素同父元素等高
Align-self 針對伸縮盒子中的某個元素單獨設置排列方式
Auto 使用默認方式
Flex-start 在伸縮盒子左上角排列
Flex-end 在伸縮盒子的左下角排列
Center 在伸縮盒子的中間排列
Baseline 在伸縮盒子的左上角基線排列
Strecth 拉伸所有的子元素同父元素等高
注意：該屬性是在align-items的基礎上對某個子元素進行單獨設定
該屬性的默認方式並不是左上角，而是父級添加的屬性
Align-content 設置伸縮盒子的子元素換行後的對齊方式
注意：如果伸縮盒子的子元素沒有換行，那麼該屬性無效
Flex-start 換行內容靠左上角
Flex-end 換行內容靠左下角
Center 換行內容居中顯示
Space-between 換行內容在垂直方向的頂部和底部分開
Space-around 各行在彈性盒子容器中平均分佈，兩端保留子元素和子元素之間間距大小的一半
Strecth 拉伸子元素
Order 設置彈性盒子內的子元素的排列順序
值爲整數
數越小，排列越靠前