Flex容器图片不换行是因未设flex-wrap:wrap；应设min-width、用flex:0 1 auto；Grid的auto-fit+minmax更稳；图片需width:100%+height:auto；文字须与图片同容器包裹。
图片在 flex 容器里不换行，只因没设换行策略
Flex 默认是单行布局（flex-wrap: nowrap），哪怕容器变窄，图片也会被压缩或溢出，而不是自动折到下一行。这不是图片本身的问题，而是父容器的 flex-wrap 没打开。
实操建议：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给图文组合的父容器加
display: flex后，**必须显式声明**flex-wrap: wrap，否则所有子项死守一行 - 子项（如
min-width: 240px），避免小屏下被压成一条线 - 别依赖
width: 100%控制单个卡片宽度——它会随父容器拉伸，破坏换行节奏；用flex: 0 1 auto更可控
用 Grid 实现真正“智能换行”，比 Flex 更省心
Flex 的换行依赖子项尺寸和容器宽度博弈，容易出现最后一行空缺、列宽不均。Grid 的 auto-fit + minmax() 是目前最稳的自动列数方案。
实操建议：
- 直接写
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))，280px 是单列最小宽度，1fr表示剩余空间均分 -
auto-fit会收缩空轨道，auto-fill则会占位留白——换行场景只用auto-fit - 配合
gap: 12px统一内外间距，**别再给卡片加 margin**，否则 gap 和 margin 叠加导致间距翻倍
图片本身不自适应，换行再好也白搭
即使布局能换行，如果图片用 width: 300px 这类固定值，缩放时仍会撑破容器或留白。关键在让图片响应式缩放，同时保持比例。
实操建议：
- 对
width: 100%+height: auto，这是最简自适应，适用于等比例缩放 - 若需裁剪（比如头像、商品图），改用
width: 100%; height: 200px; object-fit: cover，注意height必须固定，否则object-fit不生效 - 避免在
height或width属性（如
文字说明跟着图片换行失败？大概率是标签语义搞错了
很多人把 并列写，结果文字总掉到下一行——因为 是块级元素，默认独占一行。不是换行逻辑坏了，是结构没包对。
实操建议：
- 用语义化组合
文字 display: inline-block或放进 Flex/Grid 容器 - 别把
- 如果不用
div的尺寸和换行行为实际项目中最容易被忽略的一点：换行行为是否生效，取决于最外层容器的宽度是否受限制。如果父容器是
position: absolute、width: fit-content或没有设定宽度上下文（比如浮动后塌陷），Grid/Flex 的换行规则根本不会触发——先检查容器有没有真实宽度，再调布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
