为何Flexbox容器在大屏幕上也换行，而非仅在小屏幕？

为什么始终堆叠？ #

• 你给容器用了display: inline-flex，这个属性会让容器宽度完全由内部内容决定，而非撑满父容器的可用空间。不管屏幕多大，容器本身的宽度都放不下两个子元素，所以flex-wrap: wrap直接触发换行，一直处于堆叠状态。
• 另外，intro-text没有设置宽度限制，里面的长文本会把它撑得很宽，进一步压缩了并排空间，加剧了堆叠问题。

解决方法 #

不需要额外媒体查询，调整两点就能实现“空间不足时才堆叠”的效果：

1. 把容器的display: inline-flex改成display: flex，让容器占满父元素可用宽度，给子元素留出并排空间。
2. 给intro-text设置宽度规则，比如用flex: 1让它占据剩余空间，或设置min-width避免文本过度挤压才换行。

修改后的代码示例 #

CSS

.banner-container{
  display: flex; /* 替换inline-flex */
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 10px; /* 用gap替代margin，更简洁的间距控制 */
}

.intro-text{
  border: 2px solid blueviolet;
  flex: 1; /* 让文本容器占据剩余空间，与图片并排 */
  min-width: 300px; /* 可选：设置最小宽度，避免文本过窄才换行 */
}

.banner-img{
  border: 2px solid blue;
  max-width: 50%;
}

.banner-img img{
  width: 100%;
  height: auto;
}

HTML（无需修改）

<div class="banner-container">
    <div class="banner-img">
        <img src="https://www.region-muenchen.com/fileadmin/region-muenchen/Dateien/Fotos_Abb/Landkreiskarten/DAH_Ausschnitt.jpg" alt="map Dachau area">
    </div>
    <div class="intro-text">
        <h1>Something</h1>
        <h4>Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something </h4>
    </div>
</div>

额外说明 #

• 用gap替代子元素的margin，能避免flex布局中margin导致的额外间距计算问题，更精准控制容器内元素间距。
• 设置min-width是为了让文本容器在屏幕缩小到一定程度时才换行，避免文本被挤得过于狭窄影响阅读体验，不需要的话可以直接去掉。

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