一.在父盒子上設置樣式
1.display:flex;讓盒子變成一個伸縮盒子
2.flex-direction 控制主軸方向
flex-direction:row 水平往右；
flex-direction:column 垂直往下；
3.justify-content 主軸對齊方式
justify-content:flex-start ;往主軸開始位置對齊
justify-content:flex-end ;往主軸結束位置對齊
justify-content:center ;居中對齊
justify-content:space-between;讓盒子在主軸方向平均分布
justify-content:space-around;讓盒子在主軸方向平均分布，兩端不留空隙
4.align-items 側軸單行對齊方式
align-items:flex-start;往側軸開始位置對齊
align-items:flex-end;往側軸結束位置對齊
align-items:center;往側軸方向垂直對齊
align-items:stretch;往側軸方向拉伸，盒子不能設置高度
5.flex-wrap:wrap 控制盒子換行
6.align-content 側軸多行對齊方式
align-content:flex-start ; 往側軸開始位置對齊
align-content:flex-end;往側軸結束位置對齊
align-content:center;往側軸方向垂直對齊
align-content:space-between;讓盒子在側軸方向平均分布
align-content:space-around;讓盒子在側軸方向平均分布，兩端不留空隙
align-content:stretch;往側軸方向拉伸，盒子不能設置高度
二.在子元素設置樣式
1.flex 可以分數分配主軸的剩余空間，在排布完設置了寬高的盒子之后，再分配空間
2.order:控制子元素的排布順序，數值越小，越靠前。
3.align-self 控制自己在側軸的對齊方式
align-self::flex-start;;往側軸開始位置對齊
align-self:flex-end;往側軸結束位置對齊
align-self::center;往側軸方向垂直對齊
align-self::stretch;往側軸方向拉伸，盒子不能設置高度