商品主图与描述区左右不对齐的根源在于未控制Flex伸缩行为和最小尺寸，需设外层min-height、图片区flex:0 0 480px、描述区flex:1并加overflow-y:auto，同时处理小屏换行、图片占位、断行异常等问题。
商品主图与描述区左右不对齐
最常见的表现是：大图加载后把右侧文字往下顶，或者小屏下文字区被压缩成窄条、换行错乱。根本原因不是没写 flex，而是没控住伸缩行为和最小尺寸。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 外层容器必须设
min-height: calc(100vh - 80px)（减去 header 高度），不能只靠height: 100% - 图片区用
flex: 0 0 480px固定基础宽度，再加max-width: 100%和height: auto保比例 - 描述区用
flex: 1占剩余空间，并显式设overflow-y: auto，防长文案撑爆视口 - 图片容器加
flex-shrink: 0，否则 Flex 会主动压扁高清图导致失真
价格和购买按钮在小屏下错位换行
375px 宽屏时 .price 和 .btn-buy 强行并排，结果价格文字折行、按钮掉到下一行——这不是媒体查询漏写了，而是没管内联元素的换行策略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把价格和按钮包进一个
<div class="action-bar">，设display: flex+flex-wrap: wrap -
.price加white-space: nowrap，防止 “¥299.00” 被拆开 -
.btn-buy设flex: 1 1 auto，并在@media (max-width: 480px)中改为flex: 1 1 100%
图片加载时页面抖动或白屏
没设占位高度的 <img> 加载前高度为 0，文字先占满整行，图一进来立刻“跳”，用户感知极差；弱网下还可能白屏几秒。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须写
alt，内容格式为“品牌+型号+核心卖点”，例如alt="Apple AirPods Pro 第二代 主动降噪 空间音频" - 启用原生懒加载：
loading="lazy"（所有现代浏览器支持） - 用
<picture>做 fallback：<source srcset="product.webp" type="image/webp">+<img src="placeholder.svg" srcset="product.jpg" ...> - 预留高度：对图片容器设
aspect-ratio: 4/3或用padding-top: 75%配合绝对定位
文字在不同设备上断行异常
中英文混排、无空格 SKU（如 "ABC-XYZ-2024V2"）在 Safari 或 iOS WebView 里容易整行溢出，Chrome 看着正常，但上线后用户反馈“文字跑出屏幕”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 描述类容器统一加
word-break: break-word（兼容老 Safari）+overflow-wrap: break-word（现代标准） - 避免只依赖
white-space: normal，它对连续无空格字符串无效 - 技术参数如
"CPU: Intel Core i7-13700K"，可在冒号后插入零宽空格，但仅限构建时注入，别用 JS 动态插
细节全在容器尺寸、伸缩锁死、占位预留和断行兜底里，漏掉任意一项，用户滑到详情页第一眼就感受到“卡顿”或“错位”。
