flex佈局筆記整理

flex佈局筆記整理

瞭解-webkit-box

利用postcss進行css代碼的向後兼容時，display:flex兼容後的代碼常會帶有display：-webkit-box。
部分移動端內核較低，只支持老版本的box佈局，不支持flex佈局。
box佈局是flex佈局的前身，與float不一樣，float超出邊界時會自動換行，box和flex不會。

box與flex區別

容器部分

1. 子元素總寬度超過父元素時：
   box => 子元素溢出父元素邊界
   flex => 子元素被擠壓
   查看對比
2. 修改排列時的主軸：
   box => -webkit-box-orient: (horizontal | vertical)
   flex => flex-direction: (row | column)
   (效果相同，差別僅是屬性名不一樣)
3. 排列時的順序:
   box => -webkit-box-direction: (normal | reverse)
   flex => flex-direction: (row-reverse | column-reverse)
   注： flex的反轉效果，以row-reverse爲例，是從容器最右邊開始排列的，box反轉效果是從容器最左邊排列的(查看對比)
4. 主軸富餘空間管理：
   box => -webkit-box-pack:
   / start: 富餘空間在右邊
   / end: 富餘空間在左邊
   / center: 富餘空間在兩邊
   / justify； 富餘空間在項目之間
   flex => justify-content:
   / flex-start 富餘空間在左邊
   / flex-end 富餘空間在右邊
   / center 富餘空間在兩邊
   / space-between, space-around, space-evenly 不一樣形態的富餘空間在項目之間
5. 側軸富餘空間管理：
   box => -weblit-box-align:
   / start: 富餘空間在下面
   / center： 富餘空間在兩邊
   / end：富餘空間在上面
   flex => align-items:
   / flex-start: 富餘空間在下面
   / center: 富餘空間在兩邊
   / flex-end: 富餘空間在上面
   / baseline: 基線對其
   / stretch: 等高佈局

注：四、5中是相對於主軸和側軸，並不是固定是X軸仍是y軸

項目(item)部分

1. 拉伸與壓縮
   box => -webkit-box-flex （既能控制拉伸也能控制壓縮）
   flex => flex-grow (只能控制拉伸)、flex-shrink (只能控制壓縮)
2. 寬度設置
   box => width
   flex => width或flex-basis,flex-basis優先級高於width

flex佈局基礎

基本概念可參考一勞永逸的搞定 flex 佈局，大部分屬性規則都不復雜，參考下圖使用便可。須要注意的屬性是flex-grow和flex-shrink。

flex-grow的計算方式

flex-grow的做用： 當主軸方向存在富餘空間時，將富餘空間賦予對應item
flex-grow默認值： 0
flex-grow觸發條件： 主軸方向存在富餘空間
flex-grow對於富餘空間計算： 富餘空間根據flex-grow數值進行分配
例：
假設content寬度爲600px，flex佈局，其內部有4個item，item初始寬度分別爲50px、100px、150px、200px。
第1個item的flex-grow:4;
第4個item的flex-grow:1;
Q：求4個item的寬度分別爲多少？
解：

1. 計算富餘空間寬度：
   富餘 = 600px - (50+100+150+200)px = 100px
2. 計算單位flex-grow的分配寬度：
   單位flex-grow寬度 = 富餘/(flex-grow總和) = 100px/(4+1) =20px
3. 按照flex-grow數值分配寬度：
   第1個item寬度 = 初始寬度 + 單位flex-grow寬度*flex值 = 50px + 20px*4 = 130px
第4個item寬度 = 初始寬度 + 單位flex-grow寬度*flex值 = 200px + 20px*1 = 220px

所以，4個item寬度分別爲130px、100px、150px、220px。可查看實例

flex-shrink的計算方式

flex-shrink的做用： 當容器flex-wrap爲nowrap，且item初始寬度之和大於容器寬度時，容器會對其中的item進行壓縮，flex-shrink決定壓縮時的規則。
flex-shrink默認值： 1
flex-shrink觸發條件：容器寬度不夠，須要壓縮內容顯示
flex-shrink計算方式：

1. 計算壓縮空間
2. 每一個item權重 = flex-shrink * 寬度， 根據權重分配壓縮空間
3. 是否有item會被壓縮至0寬度，如有則假設這些item寬度爲0，從新進行壓縮空間分配計算

注：當item中有內容時，item被壓縮的最小寬度爲內容寬度

例：假設content寬度爲300px，flex佈局，其內部有4個item，item初始寬度分別爲50px、100px、150px、200px。
Q1：4個item實際顯示的寬度爲多少？
item1的flex-shrink設爲10;
item4的flex-shrink設爲5;
Q2: 4個item的寬度分別爲多少？
解：
Q1:

1. 計算壓縮空間寬度
   壓縮 = (50+100+150+200)px - 300px = 200px
2. 分配壓縮空間
   4個item寬度比爲1:2:3:4，初始flex-shrink爲1
單位權重寬度 = 200px/(1*1+2*1+3*1+4*1) = 20px
第1個item寬度 = 初始寬度 - 單位權重寬度*權重 = 50px - 20px*1*1 = 30px
第2個item寬度 = 初始寬度 - 單位權重寬度*權重 = 100px - 20px*2*1 = 60px
第3個item寬度 = 初始寬度 - 單位權重寬度*權重 = 150px - 20px*3*1 = 90px
第4個item寬度 = 初始寬度 - 單位權重寬度*權重 = 200px - 20px*4*1 = 120px
3. 是否須要從新計算
   因爲步驟2計算的item寬度都大於等於0，所以不須要從新計算

所以，4個item寬度分別爲 30px、60px、90px、120px。

Q2：

1. 計算壓縮空間寬度
   壓縮 = (50+100+150+200)px - 300px = 200px
2. 分配壓縮空間
   4個item寬度比爲1:2:3:4，item一、item4的flex-shrink分別爲十、5，其他flex-shrink爲1
單位權重寬度 = 200px/(1*10+2*1+3*1+4*5) = 40/7px
第1個item寬度 = 初始寬度 - 單位權重寬度*權重 = 50px - 40/7px*1*10 = -7.14px
3. 是否須要從新計算
   因爲第1個item計算後的寬度爲-7.14px<0，所以須要從新分配壓縮空間
4. 計算壓縮空間寬度
   因爲上一步中item1寬度小於0，將item1寬度看成0，從新計算壓縮空間寬度
壓縮 = (100+150+200)px - 300px = 150px
5. 分配壓縮空間
   單位權重寬度 = 150px/(2*1+3*1+4*5) = 6px
第1個item寬度 = 0
第2個item寬度 = 初始寬度 - 單位權重寬度*權重 = 100px - 6px*2*1 = 88px
第3個item寬度 = 初始寬度 - 單位權重寬度*權重 = 150px - 6px*3*1 = 132px
第4個item寬度 = 初始寬度 - 單位權重寬度*權重 = 200px - 6px*4*5 = 80px
6. 是否須要從新計算
   因爲步驟5計算的寬度都大於等於0，所以不須要從新計算

所以，4個item寬度分別爲 0、88px、132px、80px。可查看實例注意：給item添加文字後，寬度沒法壓縮爲0，壓縮空間計算將更爲複雜。