首屏banner图文混排需同时满足三点：图片不溢出（max-width:100%+height:auto+flex-shrink:0）、文字不被压扁（flex-grow:1+min-width:0）、小屏自动堆叠不错位（flex-wrap:wrap+flex-direction:column+order）。
首屏 Banner 图文混排用 Flex 能做，但“优雅”取决于三点：图片不溢出、文字不被压扁、小屏自动堆叠不错位——缺一不可。
flex-wrap: wrap 是换行生效的硬门槛
很多 Banner 在小屏下横向滚动或文字挤成一团，根本原因是没写 flex-wrap: wrap。Flex 默认是 nowrap，哪怕你给子项设了 width: 50% 或 flex: 1，它也坚决不换行。
- 必须显式加
flex-wrap: wrap，否则所有图文项强行挤在一行，尤其 Banner 中常含大图+长标题时，极易撑破容器 - 别用
justify-content: space-between配合flex-wrap：最后一行只剩 1–2 项时会被拉满，视觉失衡 - 若 Banner 内部是「左图右文」结构（非多卡片），则不需要
wrap，但必须控制主轴方向和对齐方式
图片必须设 max-width: 100% + height: auto + flex-shrink: 0
Banner 图片一旦失控，整个布局就塌——常见错误是只写 width: 100%，结果高宽比失真、文字被顶开、甚至触发横向滚动条。
-
max-width: 100%+height: auto是等比缩放底线，缺一不可 -
flex-shrink: 0防止 Flex 容器在空间紧张时压缩图片（比如窄屏下文字区域想伸展，图片却被压成一条线） - 别设固定
height或aspect-ratio后又忽略 fallback：旧版 Safari 对aspect-ratio支持不稳定，height: auto更安全 - 如果图片是背景图，改用
background-size: cover，但语义性下降，SEO 和可访问性受损
文字区域要用 flex-grow: 1 + min-width: 0
文字被压成一列、单词断不开、URL 撑破容器……这些问题大多出在文字容器没设 min-width: 0。Flex 默认会按内容最小宽度（min-content）分配空间，长链接或无空格文本会让它拒绝收缩。
- 给文字容器（如
.banner-text）设flex-grow: 1，让它主动占满剩余空间 - 必须加
min-width: 0，否则遇到长 URL 或中文无空格段落时，Flex 会优先保内容宽度，导致换行失效或图片被挤出视口 - 避免用
margin-left推文字：改用容器级gap，更稳定且适配 RTL - 标题字体大小建议用
clamp()（如font-size: clamp(1.25rem, 4vw, 2.5rem)），比纯媒体查询更平滑
小屏堆叠时，order 和 flex-direction 切换要同步
桌面端「左图右文」，移动端「上文下图」是常见需求。仅靠 order 不生效，是因为它只在 Flex 容器内起作用，且依赖主轴方向。
- 移动端必须切
flex-direction: column，否则order按行计算，图文仍并排 - 图片设
order: 1、文字设order: 0，就能实现「文字在上、图片在下」，且不改动 HTML 结构 - 别用极端
order值（如-999或999）：旧版 Safari 解析不稳定 - 如果 Banner 内还有按钮等元素，统一纳入 order 控制范围，避免部分元素卡在错误位置
真正难的不是让 Banner 在桌面端居中显示，而是当图片加载延迟、字体尚未渲染、或用户缩放页面时，图文关系依然稳固。这时候，flex-basis 的取值、min-width 的底线、以及 max-width: 100% 的强制约束，比任何炫技动画都关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
