flex布局下仅当可用空间低于指定阈值时才触发内容换行是否可行？

你当前使用的flex: 0 1 400px中第一个参数flex-grow为0，代表文本容器不会在父容器有剩余空间时自动拉伸，始终被限制在最大400px宽度，所以即便屏幕空间充足，文本也会保持换行状态。

方案1：纯flex自适应实现（无需媒体查询） #

直接调整flex属性即可实现自动换行阈值控制：

1. 父容器配置

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 可自定义元素间距 */
}

2. 文本容器配置

.text-box {
  /* 允许拉伸、允许缩小、基础宽度设为你要的换行阈值 */
  flex: 1 1 400px;
  min-width: 0; /* 兼容长文本/连续字符不自动换行的问题 */
}

3. 图片容器配置

.img-box {
  /* 固定尺寸，不拉伸不缩小，宽度替换为你的实际图片宽度 */
  flex: 0 0 300px;
}

实现逻辑 #

• 当父容器宽度 ≥ 文本容器基础宽度 + 图片宽度 + 间距时，两个元素并排，文本容器自动拉伸填充剩余空间，文本仅在当前容器宽度内自然换行
• 当父容器宽度小于上述总宽度时，自动触发换行，两个元素上下排布，各自占满整行宽度

方案2：媒体查询实现（阈值更精准） #

如果需要完全固定触发换行的屏幕尺寸阈值，可搭配媒体查询实现：

/* 大屏样式 */
.wrapper {
  display: flex;
  gap: 16px;
}
.text-box {
  flex: 1;
  min-width: 0;
}
.img-box {
  width: 300px;
  flex-shrink: 0;
}

/* 小屏触发换行，阈值可自定义 */
@media (max-width: 768px) {
  .wrapper {
    flex-direction: column;
  }
  .img-box {
    width: 100%;
  }
}

内容的提问来源于stack exchange，提问作者Maurício Szabo