flex 佈局原理
全稱 flexible box，彈性佈局。
如何開啓：為元素添加 display: flex。
開啓 flex 佈局的元素，稱為 flex 容器（flex container），其子元素成為容器成員，稱為 flex 項目。
flex 佈局原理：通過給父盒子添加 display: flex，來控制盒子的位置和排列方式。
flex 佈局父盒子常見屬性
flex-direction
設置主軸方向
| 屬性值 | 含義 |
|---|---|
| row | 默認值，從左到右 |
| row-reverse | 從右到左 |
| column | 從上到下 |
| column-reverse | 從下到上 |
justify-content
設置主軸子元素排列方式
| 屬性值 | 含義 |
|---|---|
| flex-start | 默認值，從頭開始 |
| flex-end | 從尾部開始 |
| center | 居中 |
| space-around | 平分剩餘空間 |
| space-between | 兩側子元素貼邊，再平分剩餘空間 |
flex-wrap
設置子元素是否換行
默認不換行，若子盒子寬度和大於父盒子，則會收縮！
| 屬性值 | 含義 |
|---|---|
| wrap | 換行 |
| nowrap | 默認值，不換行 |
align-items
設置子元素在側軸上的排列方式（子元素單行）
| 屬性值 | 含義 |
|---|---|
| flex-start | 側軸頭部開始 |
| flex-end | 側軸尾部開始 |
| center | 側軸居中 |
| stretch | 默認值，拉伸（拉滿整個側軸），若子元素設置了高度則失效 |
align-content
設置子元素在側軸上的排列方式（子元素多行）
| 屬性值 | 含義 |
|---|---|
| flex-start | 默認值，側軸頭部開始 |
| flex-end | 側軸尾部開始 |
| center | 側軸居中 |
| stretch | 子元素高度平分父元素高度（需要子元素沒有設置高度） |
| space-around | 平分側軸空間 |
| space-between | 側軸兩側貼邊再平分剩餘空間 |
flex-flow
flex-direction 與 flex-wrap 屬性的複合寫法
son {
flex-flow: row wrap;
}flex 佈局子盒子常見屬性
flex
flex 屬性其實是 flex-grow、flex-shrink、flex-basis 三個屬性的簡寫。
flex-grow 屬性值為一個數字，用於設置彈性盒子的擴展比例，即盒子佔剩餘空間的份數，默認為 0。常見的 flex: 1 是 flex-grow 為 1。
flex-shrink 屬性值為一個數字，用於設置盒子的收縮比例，當子盒子的寬度之和大於父盒子時才會收縮。
flex-basis 用於設置子盒子的初始長度。
span {
flex: 1;
}
.son {
flex: 0 0 33.33%;
}align-self
單獨設置某個子盒子在側軸的排列方式，它會覆蓋 align-items 屬性。默認值為 auto，表示繼承父盒子的 align-items 屬性，其餘屬性值與 align-items 相同。
order
定義子盒子在主軸上的排列順序。默認值為 0，值越小越靠前，可以為負數。
.son {
order: -3;
}
