flex中的 flex-shrink flex-basis

### CSS `flex-shrink` 属性的作用 在 Flexbox 布局中，`flex-shrink` 定义了项目的收缩能力。当容器空间不足时，项目会按照此属性设定的比例缩小尺寸[^1]。 #### `flex-shrink: 0` 设置为 `0` 表示该项目不会被压缩，即使其兄弟元素的空间不足以容纳所有子项也不会改变大小。这通常用于确保某些特定宽度或高度的关键组件不因布局调整而变形： ```css .item { flex-shrink: 0; } ``` #### `flex-shrink: 1` 默认情况下，大多数浏览器会给每个弹性盒子成员分配一个初始值为 `1` 的 `flex-shrink` 属性。这意味着如果存在负向剩余空间（即总内容超出父级可用区域），那么这些成员将会均匀地减少它们各自的尺寸来适应新的约束条件: ```css .item { flex-shrink: 1; } ``` 通过对比可以看出，在相同条件下拥有更高 `flex-shrink` 数值的项目将优先于其他具有较低数值的同辈进行缩放操作；而对于那些设置了 `flex-shrink: 0` 的对象来说，则完全不受这种行为的影响。