默认情况下，Flex 项目会根据内容宽度自动换行；若子元素（如 .intro-text）占据 100% 宽度或缺乏弹性约束，即使空间充足也会被 flex-wrap: wrap 推至下一行。解决方法包括设置 flex: 1 实现等比伸缩，或配合媒体查询实现响应式断点控制。
默认情况下，flex 项目会根据内容宽度自动换行；若子元素（如 `.intro-text`）占据 100% 宽度或缺乏弹性约束，即使空间充足也会被 `flex-wrap: wrap` 推至下一行。解决方法包括设置 `flex: 1` 实现等比伸缩，或配合媒体查询实现响应式断点控制。
Flexbox 的 flex-wrap: wrap 并非“仅在小屏触发”的智能行为——它始终生效：只要单个子项的基础尺寸 + 间距超出容器可用宽度，就会换行。在你的代码中，.intro-text 默认为块级元素，宽度占满父容器（即 flex-basis: auto 且无收缩限制），而 .banner-img 又设置了 max-width: 50% 但未声明 flex 属性，导致两者无法协同分配空间。结果是：即使大屏有足够宽度，两个 div 仍因“各自坚持占满”而被迫换行。
✅ 推荐解法一：启用弹性分配（无需媒体查询）
为 .intro-text 和 .banner-img 同时添加 flex: 1，让它们在主轴（row）上等比例拉伸、自动适应容器宽度：
.banner-container {
display: flex; /* 改为 flex（非 inline-flex），避免行内布局限制 */
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: row;
}
.intro-text,
.banner-img {
flex: 1; /* 关键：赋予弹性，允许缩放 */
margin: 10px;
}
.intro-text {
border: 2px solid blueviolet;
}
.banner-img {
border: 2px solid blue;
max-width: 50%; /* 作为上限，不影响 flex 分配 */
}
.banner-img img {
width: 100%;
height: auto;
}?
flex: 1等价于flex: 1 1 0（即flex-grow: 1,flex-shrink: 1,flex-basis: 0），意味着二者从零宽度开始均分剩余空间，完美适配不同屏幕。
✅ 进阶解法二：结合媒体查询实现精确断点控制
若需严格区分「桌面横排」与「移动端竖排」，可禁用默认换行，并在小屏时启用：
.banner-container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap; /* 默认不换行 */
}
/* 小屏下才换行 */
@media (max-width: 768px) {
.banner-container {
flex-wrap: wrap;
}
.intro-text,
.banner-img {
flex: 1 1 100%; /* 换行后各占整行 */
}
}⚠️ 注意事项
- 避免混用
inline-flex与flex-wrap: wrap：inline-flex容器本身受行内流限制，可能引发不可预期的换行；推荐统一使用display: flex。 -
max-width不等于flex-basis：它仅设上限，不参与初始尺寸计算；要控制初始占比，请用flex-basis或width配合flex。 - 文字溢出问题：长标题（如
<h4></h4>）可能撑宽.intro-text，建议对文本容器添加word-break: break-word或overflow-wrap: break-word。
总结：Flex 布局的换行逻辑由容器宽度、子项基础尺寸与弹性规则共同决定。与其依赖“屏幕大小直觉”，不如主动定义 flex 属性掌控伸缩行为——这是响应式 Flexbox 的核心实践原则。
