12-flex 項目收縮因子 · 前端教學筆記[更新中...]

# flex 項目收縮因子 ## 1. `flex-shrink`屬性 - 當容器主軸 "空間不足" 且 "禁止換行" 時, `flex-shrink`才有意義 - 該屬性的值,稱為**收縮因子**, 常見的屬性值如下: | 序號 | 屬性值 | 描述 | | ---- | --------- | ------------------------ | | 1 | `1`默認值 | 允許項目收縮 | | 2 | `initial` | 設置初始默認值,與 1 等效 | | 3 | `0` | 禁止收縮,保持原始尺寸 | | 4 | `n` | 收縮因子: 正數 | --- ## 2. 示例 ![](https://img.kancloud.cn/5f/ac/5fac1f0f5471ca2af34945cdc9b190c3_278x224.jpg) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>flex 項目收縮因子</title> <style> /* 容器尺寸 */ .container { /* 減小空間寬度,造成主軸空間不足 */ width: 180px; height: 150px; } /* flex容器 */ .container { display: flex; /* 禁止換行 */ flex-wrap: nowrap; } /* flex項目 */ .item { /* 增加寬度,造成主軸空間不足 */ width: 100px; height: 50px; background-color: lightcyan; font-size: 1.5rem; /* 收縮因子 */ /* 默認允許收縮適應主軸空間變化,以下語法都可以 */ flex-shrink: initial; flex-shrink: 1; /* 為便于演示每個項目的收縮因子,先禁止收縮,人為造成空間不足 */ /* 此時,容器寬度180, 三個項目部寬度300,超出容器寬度120, 需要在項目中分配 */ flex-shrink: 0; } /* 自定義項目收縮因子 */ .item:first-of-type { background-color: lightgreen; flex-shrink: 1; } .item:nth-of-type(2) { background-color: yellow; flex-shrink: 2; } .item:last-of-type { background-color: lightskyblue; flex-shrink: 3; } /* 項目收縮的計算方法(以主軸水平,寬度增長為例) 1. 項目超出主軸空間的寬度: (100 * 3 ) - 180 = 120px 2. 收縮因子之和: 1 + 2 + 3 = 6 3. 每個收縮因子對應的收縮量是: 120 / 6 = 20px 4. 每個項目根據自身收縮因子計算收縮量: 4.1 第一個項目: 1 * 20 = 20px 4.2 第一個項目: 2 * 20 = 40px 4.3 第三個項目: 3 * 30 = 60px 5. 計算每個項目最終寬度: 5.1 第一個項目: 100 - 20 = 80px 5.2 第二個項目: 100 - 40 = 60px 5.3 第三個項目: 100 - 60 = 40px 6. 更換主軸方向后, 計算方式完全一樣,請自行測試 */ </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </body> </html> ```