14-flex 項目縮放的簡寫 · 前端教學筆記[更新中...]

# flex 項目縮放的簡寫 ## 1. `flex`屬性 - 項目放大,縮小與計算尺寸,對于項目非常重要,也很常用 - 每次都要寫這三個屬性,非常的麻煩,且沒有必要 - `flex`屬性,可以將以上三個屬性進行簡化: - 語法: `flex: flex-grow flex-shrink flex-basis` ### 1.1 三值語法 | 序號 | 屬性值 | 描述 | | ---- | ------------------ | ------------- | | 1 | 第一個值: 整數 | `flex-grow` | | 2 | 第二個值: 整數 | `flex-shrink` | | 3 | 第三個值: 有效寬度 | `flex-basis` | 舉例: | 序號 | 案例 | 描述 | | ---- | ----------------- | ------------------------------- | | 1 | `flex: 0 1 auto` | 默認值: 不放大,可收縮, 初始寬度 | | 2 | `flex: 1 1 auto` | 項目自動放大或收縮適應容器 | | 3 | `flex: 0 0 100px` | 按計算大小填充到容器中 | ### 1.2 雙值語法 | 序號 | 屬性值 | 描述 | | ---- | ------------------ | ------------ | | 1 | 第一個值: 整數 | `flex-grow` | | 3 | 第二個值: 有效寬度 | `flex-basis` | 舉例: | 案例 | 描述 | | --------------- | ------------------------------- | | `flex: 0 180px` | 禁止放大,按計算大小填充到容器中 | ### 1.3 單值語法 | 序號 | 屬性值 | 描述 | | ---- | -------- | ----------------------- | | 1 | 整數 | `flex-grow` | | 2 | 有效寬度 | `flex-basis` | | 3 | 關鍵字 | `initial | auto | none` | 舉例: | 序號 | 案例 | 描述 | | ---- | ------------- | ----------------- | | 1 | `flex: 1` | `flex: 1 1 auto` | | 2 | `flex: 180px` | `flex: 1 1 180px` | | 3 | `initial` | `flex: 0 1 auto` | | 4 | `auto` | `flex: 1 1 auto` | | 5 | `none` | `flex: 0 0 auto` | > 推薦使用`flex`, 就像推薦使用`flex-grow`設置主軸與換行一樣 ## 2. 示例 ![](https://img.kancloud.cn/7a/12/7a122d30f71cd777999eda66f9d99ec0_382x217.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項目縮放的簡寫 */ /* 三值語法: flex: grow shrink basis */ .item:first-of-type { background-color: lightgreen; /* 默認: 不放大,可收縮, 原始大小 */ flex: 0 1 auto; /* 項目自動放大或收縮自適應容器變化 */ /* 此時,第一個項目flex-grow:1,占據主軸所有剩余空間200px*/ flex: 1 1 auto; /* 按指定寬度計算項目占據的主軸空間: 80px, 而不是50px */ flex: 0 0 80px; } /* 雙值語法: flex: grow basis) */ .item:nth-of-type(2) { background-color: yellow; /* 不放大,計算寬度為100px */ flex: 0 100px; } /* 單值語法: flex: grow | basis | 關鍵字*/ .item:last-of-type { background-color: lightskyblue; /* 自動獲取剩余空間 */ flex: auto; /* 等價于 */ flex: 1; /* 項目大小初始化*/ flex: initial; /*等價于重置為默認值 */ flex: 0 1 auto; /* 項目禁止縮放 */ flex: none; /* 等價于 */ flex: 0 0 auto; /* 看不出效果是因為當前項目寬度不夠 */ flex: 0 0 250px; /* 如果想自動收縮適應容器,更改第二個參數*/ flex: 0 1 250px; } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </body> </html> ```