應用在父元素上-flex box
1. 模型
display: flex（盒子模型）
定義父元素為flex元素
2. 方向
flex-direction (子元素的排列方向)
- row (默認值): 從主軸起點到到主軸終點
- row-reverse: 從主軸終點到主軸起點
- column: 從側軸起點到側軸終點
- column-reverse: 從側軸終點到側軸起點
3. 換行
flex-wrap（子元素在主軸上鋪滿時，是否換行）
- Nowrap（默認值）: 不換行
Flex容器能容納所有的子元素（Flex項目）排列，即使瀏覽器出現了水平滾動條（當Flex容器中添加了很多個Flex項目，至使Flex容器的寬度大于視窗寬度）。- Wrap:換行且從頂部到到底部排列
- Wrap-reverse:換行且從底部到到頂部排列
當你希望Flex容器內的Flex項目達到一定數量時，能換行排列。
當Flex容器中沒有足夠的空間放置Flex項目（Flex項目默認寬度），
4. 組合 方向 換行
flex-flow（默認值 Flex-flow: row nowrap;）
flex-flow : flex-direction flex-wrap
5. 水平對齊
justify-content（沿著主軸對齊，分配剩下多余的空閑空間）
- flex-start (默認值): flex項目從主軸起點開始無空閑空間地排列在一起
- flex-end: flex項目從主軸終點開始無空閑空間地排列在一起
- center: flex項目排列在主軸中間，兩邊空閑空間均勻分批
- space-between: 在主軸上的空閑空間均勻地分配到每兩個flex項目中間
- space-around: 在主軸上每個flex項目兩邊都分配一樣的空間
6. 垂直對齊
align-items（側軸對齊方式）
- stretch (默認值):把所有的元素伸開，所有flex項目的高度以最高的flex項目為準
- flex-start: 在主軸上排列的flex項目頂部，對齊側軸的起點
- flex-end: 在主軸上排列的flex項目底部，對齊側軸的終點
- center: 在主軸上排列的flex項目中部，對齊側軸的中間
- baseline: flex項目沿著自己的基線對齊
7. 多行垂直對齊
align-content（當出現多行flex項目時，側軸方向對齊方式）
- stretch (默認值): flex盒子和flex項目沒設置高度時，盒子高度以高度最高的flex項目為準
- flex-start: 多行flex項目頂部對準側軸起點
- flex-end: 多行flex項目底部對準側軸終點
- center: 多行flex項目中部對準側軸中間，空閑空間均勻分配打破多行flex項目兩邊
- space-between:側軸方向上，空閑空間均勻分配到每兩行flex項目的中間
- space-around: 側軸方向上，空閑空間均勻分配到每行flex項目的兩邊
應用在子元素-flex項目
1.排序
Order（排序）
- 默認情況下，所有Flex項目的order值都是0
- 可以正負值，設置子元素排列的先后順序號
- 如果兩個以下Flex項目有相同的order值時，Flex項目重新排序是基于HTML源文件的位置進行排序。
2.伸展
flex-grow（伸展）
- 默認情況下，flex-grow屬性值設置為0。表示Flex項目不會增長，填充Flex容器可用空間。表示flex-grow屬性沒有使用。
- 如果只有一個子元素設置了flex-grow的值，則這個子元素分配剩下的所有的空閑空間。如果你試著調整你瀏覽器的大小，Flex項目也會放大，以適應新的屏幕寬度。
- 如果多個子元素設置了flex-grow的值，則按照值的比例來分配剩下的空閑空間。
3. 收縮
flex-shrink（收縮）
- 默認情況下，flex-shrink的值是1，也就是說flex-shrink開關也是打開的。
- 如果你試著調整你瀏覽器的大小，Flex項目也會放大，以適應新的屏幕寬度。
- 按照子元素設置的flex-shrink值，來按比例收縮flex項目。
4. 初始寬度
flex-basis（初始寬度）
- 指定flex項目的初始寬度大小，可以是比例也可以是長度單位。
默認的值是auto。- flex-basis可以取任何用于width屬性的任何值。Flex項目寬度的計算是基于內容的多少來自動計算（很明顯，加上了padding值）。
- 這意味著，如果你增加Flex項目中的內容，它可以自動調整大小。
- 然而，如果你想將Flex項目設置一個固定的寬度，現在Flex項目的寬度受到了限制。
- 值為0,內容不考慮周圍的額外空間。
- 注意：如果flex-basis屬性的值是0時，也需要使用單位。
即flex-basis: 0px不能寫成flex-basis:0
5. 垂直位置和垂直伸展
align-self（控制單個flex項目側軸的位置和高度）
- auto
是將目標Flex項目的值設置為父元素的 align-items值，或者如果該元素沒有父元素的話，就設置為 stretch。繼承父元素的 align-item 值。- flex-end
將目標項目（Flex項目）對齊到Cross-Axis的末端。- center
將目標項目（Flex項目）對齊到Cross-Axis的中間。- stretch
會將目標項目拉伸，以沿著Cross-Axis填滿Flex容器的可用空間（Flex項目高度和Flex容器高度一樣）。- baseline
將目標項目沿著基線對齊。它與flex-start的效果看起來是一樣的，不過我相信你理解了基線是什么。因為前面已經解釋過。
6. 組合 膨脹 收縮 初始寬度
flex：flex-grow flex-shrink flex-basis
- flex:0 1 === flex： 膨脹 收縮 （無值時，默認為0）
flex默認屬性值以及所有的Flex項目都是默認行為
不伸展，會收縮- flex:0 0 auto === flex:none
試著縮放一下瀏覽器，你會注意到彈性項目不會收縮其寬度。它們從父元素中突出來了，要看到所有內容，必須橫向滾動瀏覽器。- flex: 1 1 auto === flex: auto
還是按我前面立的規矩。即，自動計算初始化寬度，但是如果有必要，會伸展或者收縮以適應整個可用寬度。
此時，項目會填滿可用空間，在縮放瀏覽器時也會隨之收縮。- flex: 2 1 0 === flex: 2
2 表示任何正數
絕對項目 相對項
1. 絕對項目
Flex：膨脹寬度 收縮寬度
如果你只設置了flex-grow和flex-shrink值，flex-basis可能是默認值0。這就是所謂的絕對flex項目。
2. 相對項目
Flex：膨脹寬度 收縮寬度 初始寬度
只有當你設置了flex-basis，你會得到一個相對flex項目。
3. 絕對和相對Flex項目之間到底有啥區別
二者之間主要的區別在于間距及如何計算間距。
- 絕對Flex項目中，只根據 flex 屬性來計算，而不是內容。
flex-basisi:0- 一個相對Flex項目內的間距是根據它的內容大小來計算的。
flex-basis:auto
Margin:auto的作用
1. 使用margin:auto
第一個Flex項目使用margin:auto;前后
當在Flex項目上使用 margin: auto 時，左、右l兩邊會占據所有剩余空間。
讓一個Flex項目的兩邊都用自動外邊距對齊
margin-left: auto;
margin-right: auto;
2.Justufy-content屬性什么時候不起作用
當在一個Flex項目上使用自動外邊距（margin: auto）時，justify-content 屬性就不起作用了。
當用 flex-direction: column 時
項目的寬度填滿了空間
1. 高度
Flex（膨脹寬度、收縮寬度、初始寬度）屬性變成了（高度）
本質上，每個作用于橫向軸（即Main-Axis）上的 flex 屬性，現在都會作用于縱向上的新Main-Axis。它只是在方向上的一個切換。
影響Main-Axis的每一個屬性現在會影響新Main-Axis。像 flex-basis 這種會影響Main-Axis上Flex項目寬度的屬性，現在會影響項目的高度，而不是寬度。
2. 位置
Main-Axis是從上到下，Cross-Axis是從左到右。
Justify-content（水平位置）變成（垂直位置）
justify-content: center；flex項目垂直居中了
Align-items（垂直位置）變成（水平位置）
align-items: center;Flex項目已經水平居中了
瀏覽器bug
在有些瀏覽器中，會有一個 bug，允許Flex項目收縮后比其內容尺寸小。這是個很古怪的行為。
