Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性
設置Flex布局也很簡單直接css中，設置它的 display:flex
1.flex-direction 容器內元素排列方向
row ：從左至右
row-reverse ：從右至左
column：從上到下
column-reverse：從下到上
2.flex-wrap:容器內的元素換行
nowrap 不換行
wrap 換行
wrap-reverse 反向換行
3.justify-content 容器內元素在主軸的對齊方式
flex-start 左對齊
flex-end 右對齊
center 居中對齊
space-between 等距對齊（兩端對齊，空白分配在元素中間）
space-around 效果同上，但是兩邊留白
4.align-items 定義容器內元素在縱軸上，如何排列以及處理空白部分
stretch 如果容器內元素未設置高度，則默認元素高度為容器高度
flex-start 容器的縱軸上部對齊
flex-end 容器的縱軸下部對齊
center 在容器的縱軸中部對齊
baseline 如果容器中的元素中有文字，則按文字底部對齊
5.align-content 個人暫時沒理解
6.flex-grow 設置這個屬性可以將元素按比例放大，默認是0
7.flex-shrink 設置這個屬性可以將元素按比例縮小，默認是0
8.flex-basis 我感覺和width差不多
9.align-self 屬性和algin-item是一樣的，不過是基於align-item父級元素進行重寫