flex容器宽度缩小时，如何实现子项按优先级截断的布局？

两个子项场景解决方案 #

直接调整原有代码，通过控制收缩优先级和补充溢出样式，就能实现需求：

.flex-parent {
  width: 400px;
  display: flex;
  flex-wrap: nowrap;
  border: 1px solid red;
  padding: 10px;
  margin: 10px;
}

.child {
  margin: 0 10px;
  min-width: 0; /* 必须添加：解除flex子项默认的最小宽度限制 */
  flex-grow: 0; /* 不让子项自动拉伸占满容器 */
}

/* 左侧子项：最后截断，收缩优先级低 */
.left-child {
  flex-shrink: 1;
}

/* 右侧子项：先截断直到消失，收缩优先级拉满 */
.right-child {
  flex-shrink: 999;
  min-width: 0; /* 确保能收缩到0宽度 */
}

/* 所有需要截断的内容统一加样式 */
.truncatable p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="flex-parent">
  <div class="child left-child truncatable">
    <p>This is "fixed", don't truncate it!</p>
  </div>
  <div class="child right-child truncatable">
    <p>Lorem ipsum dolor sit amet, consectetur</p>
  </div>
</div>

原理说明 #

• min-width:0：Flex子项默认min-width:auto，会强制子项宽度不小于内容宽度，导致截断样式失效。添加这个属性才能让子项宽度收缩到内容宽度以下。
• flex-shrink比例：右侧子项的flex-shrink值远大于左侧，容器宽度缩小时，右侧会承担几乎所有的收缩量——先持续截断内容，直到子项宽度被压缩到0完全消失；之后容器再缩小，左侧子项才开始收缩，触发自身的截断效果。

任意数量子项场景解决方案 #

如果有多个子项，只需要给每个子项按截断优先级分配梯度的flex-shrink值即可：优先级越高（越早截断消失）的子项，flex-shrink值越大；优先级越低（越晚截断）的子项，值越小。

示例代码：

.flex-parent {
  width: 500px;
  display: flex;
  flex-wrap: nowrap;
  border: 1px solid red;
  padding: 10px;
  margin: 10px;
}

.child {
  margin: 0 8px;
  min-width: 0;
  flex-grow: 0;
}

/* 截断优先级：值越大，越早被截断消失 */
.child.priority-1 { /* 最右侧，最先截断 */
  flex-shrink: 100;
}

.child.priority-2 { /* 中间子项 */
  flex-shrink: 50;
}

.child.priority-3 { /* 最左侧，最后截断 */
  flex-shrink: 1;
}

.truncatable p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="flex-parent">
  <div class="child priority-3 truncatable">
    <p>Leftmost: Truncate last</p>
  </div>
  <div class="child priority-2 truncatable">
    <p>Middle: Truncate second</p>
  </div>
  <div class="child priority-1 truncatable">
    <p>Rightmost: Truncate first, disappear earliest</p>
  </div>
</div>

额外注意 #

• 如果需要给某个子项设置“截断前的最小宽度”，直接给它加min-width: [固定值]即可，比如min-width: 80px，它会收缩到这个宽度后，才轮到优先级更低的子项开始收缩。
• flex-shrink的具体数值只要保持比例就行，比如1:100和2:200效果完全一致，不用纠结具体数字。

内容的提问来源于stack exchange，提问作者Hari Rahul