商品图区域不能只靠flex自动等高，因align-items: stretch会拉伸文字区变形，须显式设min-height或aspect-ratio；img需加width:100%;height:auto；规格项用flex:0 0 auto防压缩；小屏改flex-direction:column并配合order控制逻辑顺序。
直接用 display: flex 做商品详情页布局，能避开浮动、定位和表格的坑，但容易在图片缩放、文字截断、响应断点上翻车——关键不是“能不能用”，而是“怎么控制主轴/交叉轴行为”和“什么时候该让子项收缩或撑满”。
为什么商品图区域不能只靠 flex 自动等高？
商品详情页常见结构是左图右文（或上图下文），但 flex 默认不会强制图片按容器比例缩放，尤其当多张图高度不一致时，align-items: stretch 会让文字区被拉得变形。
- 必须显式给图片容器设
min-height或aspect-ratio（如aspect-ratio: 4/3），否则父flex容器无法推导基准尺寸 -
img标签本身需加width: 100%; height: auto;，否则可能溢出或留白 - 若用
object-fit: cover，要配合object-position控制焦点区域，避免裁掉商品主体
flex-wrap 在规格选择器里怎么避免换行错位？
颜色、尺寸等规格按钮常横向排列，用户一缩放页面就出现最后一项掉到下一行、对齐崩坏的问题。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 别只写
flex-wrap: wrap，要搭配justify-content: flex-start（默认值）+gap: 8px，避免浏览器对齐策略差异 - 每个规格项用
flex: 0 0 auto，禁止它被压缩（否则文字会被截断） - 移动端建议加媒体查询：屏幕宽
时改用 <code>flex-direction: column，比硬撑换行更可控
价格与购买按钮在小屏上堆叠失效？检查 flex-direction 和 order
桌面端价格在左、按钮在右；小屏要变成价格在上、按钮在下——但直接改 flex-direction 可能导致按钮被文字挤出视口。
立即学习“前端免费学习笔记（深入）”；
- 给价格区域加
order: 1，按钮加order: 2，这样即使flex-direction切换，逻辑顺序也不乱 - 按钮必须设
flex: 0 0 100%（或width: 100%），否则在column下仍保持原宽度 - 慎用
flex: 1给价格文字容器——它会抢空间，导致按钮被压扁甚至消失
最易忽略的是 flex-basis 的隐式值：不写 flex-basis 时，flex: 1 实际等价于 flex: 1 1 0%，而 0% 会让内容失去最小尺寸锚点，商品标题或价格可能被强行压缩成“…”。真要等分，宁可写死 flex-basis: 50% 或用 min-width 卡住底线。
