flex-grow 和 flex-shrink 是如何计算空间分配的？

flex-grow（放大）

当容器有剩余空间时，按比例分配。

.container { display: flex; width: 600px; }
.item1 { flex-grow: 1; width: 100px; }
.item2 { flex-grow: 2; width: 100px; }
.item3 { flex-grow: 1; width: 100px; }

计算过程：

1. 初始总宽度 = 100 + 100 + 100 = 300px
2. 剩余空间 = 600 - 300 = 300px
3. 总份数 = 1 + 2 + 1 = 4
4. 分配：item1 = 300 × 1/4 = 75px → 最终 175px
5. item2 = 300 × 2/4 = 150px → 最终 250px
6. item3 = 300 × 1/4 = 75px → 最终 175px

flex-shrink（缩小）

当容器空间不足时，按比例缩小。

.container { display: flex; width: 400px; }
.item1 { flex-shrink: 1; width: 200px; }
.item2 { flex-shrink: 2; width: 300px; }
.item3 { flex-shrink: 1; width: 200px; }

计算过程：

1. 初始总宽度 = 200 + 300 + 200 = 700px
2. 溢出空间 = 700 - 400 = 300px
3. 加权总份数 = 1×200 + 2×300 + 1×200 = 1000
4. item1 缩小 = 300 × (1×200)/1000 = 60px → 最终 140px
5. item2 缩小 = 300 × (2×300)/1000 = 180px → 最终 120px
6. item3 缩小 = 300 × (1×200)/1000 = 60px → 最终 140px

关键区别

• flex-grow 按 flex-basis 之外的剩余空间分配
• flex-shrink 按 flex-shrink × item-width 的加权比例缩小（宽度大的缩小更多）

flex-basis

设置项目的初始大小，优先级高于 width：

.item {
  flex-basis: 200px;  /* 优先于 width */
  width: 100px;       /* 被 flex-basis 覆盖 */
}

同分类其他题目