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> ```