如何让flex-wrap与flex-basis搭配生效实现弹性盒自动换行？

问题根因 #

你当前的布局无法正常换行主要是以下几个原因导致的：

• 两个flex子项的flex-basis总和为48%+43%=91%，小于100%，默认情况下flex子项开启了自动收缩（flex-shrink默认值为1），屏幕变窄时两个子项会优先收缩宽度，永远达不到触发flex-wrap: wrap的宽度阈值
• .text-content设置了margin: 0 auto，auto边距会自动占用flex容器的剩余空间，进一步挤压子项宽度，阻碍换行触发
• 图片设置了绝对定位脱离文档流，导致.image-container高度塌陷，也会影响flex布局的渲染判断

调整方案 #

1. 优先修改图片定位方式（如果允许的话） #

如果只是需要实现图片左移100px的效果，用transform代替绝对定位，避免图片脱离文档流，让.image-container可以被图片正常撑开：

.image {
  display: block;
  /* 去掉绝对定位，用transform实现偏移 */
  transform: translateX(-100px);
}

如果必须保留绝对定位，给.image-container设置和图片高度匹配的min-height，避免容器塌陷。

2. 调整flex子项规则，触发换行 #

给两个子项关闭自动收缩，同时给文本容器设置最小宽度，确保窄屏时自动换行：

.image-container {
  flex-basis: 48%;
  position: relative;
  border: 2px solid red;
  /* 新增：禁止自动收缩 */
  flex-shrink: 0;
  /* 可选：设置最小宽度，避免窄屏时容器过窄 */
  min-width: 300px;
}

.text-content {
  /* 去掉margin: 0 auto，换成固定边距即可，按需调整数值 */
  margin: 0 0 0 2%;
  flex-basis: 43%;
  /* 新增：禁止自动收缩 */
  flex-shrink: 0;
  /* 可选：设置最小宽度，窄屏时优先换行 */
  min-width: 300px;
  /* 新增：保证长文本正常换行 */
  word-wrap: break-word;
}

3. 可选优化 #

如果需要窄屏时文本容器占满整行，可以配合媒体查询调整小屏下的flex-basis：

@media (max-width: 768px) {
  .image-container, .text-content {
    flex-basis: 100%;
  }
}

内容的提问来源于stack exchange，提问作者U. Watt