13-flex 項目計算尺寸 · 前端教學筆記[更新中...]

# flex 項目計算尺寸 ## 1. `flex-basis`屬性 - 在分配多余空間之前,項目占據的主軸空間 - 瀏覽器根據這個屬性，計算主軸是否有多余空間 - 該屬性會覆蓋項目原始大小(width/height) - 該屬性會被項目的`min-width/min-height`值覆蓋 | 序號 | 屬性值 | 描述 | | ---- | ------ | ---------------------- | | 1 | `auto` | 默認值: 項目原來的大小 | | 2 | `px` | 像素 | | 3 | `%` | 百分比 | > 優先級: 項目大小 < `flex-basis` < `min-width/height` --- ![](https://img.kancloud.cn/c7/41/c7410fc9beeb66417bffca5c28e22803_378x225.jpg) ## 2. 示例 ```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-flow: row wrap; } /* flex項目 */ .item { width: 50px; height: 50px; background-color: lightcyan; font-size: 1.5rem; } /* flex項目計算尺寸 */ /* 瀏覽器根據這個屬性，計算主軸上是否存在剩余空間 */ .item { /* 項目占據的主軸空間根據該屬性計算,默認等于width/height */ flex-basis: auto; /* 優先級大于: width/height */ flex-basis: 70px; /* 支持百分比或表達式 */ flex-basis: 20%; /* 1rem = 16px */ flex-basis: 5rem; /* 優先級小于: min-width / min-height */ min-width: 90px; /* flex-basis通常與flex-wrap:wrap配合使用 */ /* 主軸根據flex-basis計算項目所占空間,而不必關注項目自身大小 */ flex-basis: 100px; /* 項目寬度大于100px,必須產生換行,只需更新flex-basis */ flex-basis: 150px; } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </body> </html> ```