完美掃清Flex佈局

一 初識flex

1. 開啓flex佈局的元素叫 flex container
   flex container裏面的子元素叫做 flex items
2. 開啓flex佈局（兩種）

display:flex	//表現爲block
display:inline-flex	//表現爲inline-block 

3. flex模型有兩個軸 main axis（主軸）和 cross axis（側軸）這兩個軸的方向可以改變（通過flex-direction）
4. flex items默認沿着main axis（主軸）方向排列

二 flex container上的CSS

1. flex-direction（決定main axis的方向）

flex-direction: row				//默認值 從左到右
flex-direction: row-reverse		//從右到左
flex-direction: column			//從上到下
flex-direction: column-reverse	//從下到上

2. justify-content（決定flex items 在main axis的對齊方式）

justify-content: flex-start		//對齊main axis開始位置
justify-content: flex-end		//對齊main axis結束位置
justify-content: space-between	//平分間隙（邊緣無間隙）
justify-content: space-evenly	//平分間隙（邊緣有間隙）
justify-content: space-around	//平分間隙（邊緣間隙是中間間隙的一半）

3. align-content（決定flex items 在cross axis上的對齊方式）

//對單行沒效果 多行執行 flex-start flex-end center會將多行看作一個整體進行排列
align-content: stretch			//默認，無高度會被拉伸，設置高度則不會被拉伸
align-content: normal			//效果和stretch一樣
align-content: flex-start		//對齊cross axis開始位置
align-content: flex-end			//對齊cross axis結束位置
align-content: center			//居中
align-content: space-between	//平分間隙（邊緣無間隙）
align-content: space-around		//平分間隙（邊緣間隙是中間間隙的一半）
align-content: space-evenly		//平分間隙（邊緣有間隙）

4. align-items（決定flex items在cross axis的對齊方式）

//對單行也有效果 多行的話會先將區域分成N塊，然後在每塊中根據單行的效果排列
align-items: normal		//效果和stretch一樣
align-items: stretch	//當cross axis方向沒有設置size時，自動拉伸至填充flex container
align-items: flex-start	//與cross start對齊
align-items: flex-end	//與cross end 對齊
align-items: center		//居中對齊
align-items: baseline	//與內容基線對齊

5. flex-wrap（決定flex items 單行還是多行）

flex-wrap: nowrap		//默認，不換行，過多會被擠壓
flex-wrap: wrap			//換行
flex-wrap: wrap-reverse	//從下往上一行一行排

6. flex-flow（flex-direction和flex-wrap的縮寫，順序隨意）

flex-flow: row-reverse wrap

三 flex items上的CSS

1. order

order: 10	//order的值越小越靠後排列

2. align-self（覆蓋align-items的設置）

align-self: normal		//效果和stretch一樣
align-self: stretch		//當cross axis方向沒有設置size時，自動拉伸至填充flex container
align-self: flex-start	//與cross start對齊
align-self: flex-end	//與cross end 對齊
align-self: center		//居中對齊
align-self: baseline	//與內容基線對齊

3. flex-grow（擴展main axis的剩餘間隙）

flex-grow: 2
flex-grow: 0.2
//當所有flex-grow的值加起來大於1，會按各自佔的份數將剩餘間隙平分
//當所有flex-grow的值加起來不大於1，會按各自的值乘以剩餘間隙
//最大值不能超過 max-height/max-width

4. flex-shrink（收縮main axis的超出部分）

flex-grow: 2
flex-grow: 0.2
//當所有flex-grow的值加起來大於1，會按各自佔的份數將超出部分平分
//當所有flex-grow的值加起來不大於1，會按各自的值乘以超出部分
//最大值不能小於 min-height/min-width

5. flex-basis（重新設置main axis方向上的base size）

flex-basis: 200px
//flex items 最終 base size 決定權 從高到低
//min/max-height/width
//flex-basis
//width/height
//本身size 

5. flex（felx-grow/shrink/basis的縮寫，可指定1/2/3個值）

//單值
flex: 1	//一個無單位的數 當作flex-grow的值
flex: 100px	//帶單位的值 當作flex-basis的值
//關鍵字none auto initial

//雙值
//第一個值必須爲無單位數 爲 flex-grow值
//第二個值爲 無單位數（當作flex-shrink）或 一個有效寬度值（flex-basis）

//三值
//第一個 無單位數 flex-grow
//第二個 無單位數 flex-shrink
//第三個 有效寬度指 flex-basis