11-flex 項目放大因子 · 前端教學筆記[更新中...]

# flex 項目放大因子 ## 1. `flex-grow`屬性 - 在容器主軸上存在剩余空間時, `flex-grow`才有意義 - 該屬性的值,稱為**放大因子**, 常見的屬性值如下: | 序號 | 屬性值 | 描述 | | ---- | --------- | -------------------- | | 1 | `0`默認值 | 不放大,保持初始值 | | 2 | `initial` | 設置默認值,與`0`等效 | | 3 | `n` | 放大因子: 正數 | --- ## 2. 示例 ![](https://img.kancloud.cn/e5/93/e59325c682943c3fbaf063db62d3d6e9_376x222.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: 300px; height: 150px; } /* flex容器 */ .container { display: flex; } /* flex項目 */ .item { width: 50px; height: 50px; background-color: lightcyan; font-size: 1.5rem; /* flex-grow默認值: 不放大 */ flex-grow: initial; /* 與0等效 */ flex-grow: 0; /* 允許項目放大,將剩余空間平均分配給每一個項目 */ flex-grow: 1; } /* 自定義項目放大因子 */ .item:first-of-type { background-color: lightgreen; flex-grow: 1; } .item:nth-of-type(2) { background-color: yellow; flex-grow: 2; } .item:last-of-type { background-color: lightskyblue; flex-grow: 3; } /* 項目放大的計算方法(以主軸水平,寬度增長為例) 1. 主軸剩余空間寬度: 300 - (50 * 3 ) = 150px 2. 增長因子之和: 1 + 2 + 3 = 6 3. 每個增長因子對應的增長量是: 150 / 6 = 25px 4. 每個項目根據自身增長因子計算增長量: 4.1 第一個項目: 1 * 25 = 25px 4.2 第一個項目: 2 * 25 = 50px 4.3 第三個項目: 3 * 25 = 75px 5. 計算每個項目最終寬度: 5.1 第一個項目: 50 + 25 = 75px 5.2 第二個項目: 50 + 50 = 100px 5.3 第三個項目: 50 + 75 = 125px 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> ```