用 display: flex 实现左图右文商品列表需控细节：图片设宽高和 object-fit 防塌陷变形，文字容器用 flex: 1 和 min-width: 0 防撑开，img 加 display: block 和 flex-shrink: 0，容器设 align-items: flex-start 防吊底，小屏用媒体查询切 column。
直接用 display: flex 实现左图右文商品列表，关键不是“能不能排成两列”，而是“怎么防文字撑开、图片塌陷、缩放错位”。多数翻车都出在细节没控住。
基础结构要扁平且语义清晰
每个商品项用一个 <div class="goods-item"> 包裹，内部直接放 <code><img> 和文字容器（如 <div class="goods-info">），不要多层嵌套。Flex 只作用于直接子元素，嵌太深反而难对齐。
<ul>
<li>图片必须设 <code>width 和 height（或 aspect-ratio），否则加载中会塌陷，文字上跳
flex: 1 占满剩余空间，别用 margin-left 推——缩放时容易溢出<img> 加 display: block，消除默认基线留空导致的底部悬空对齐方式按需选，别信默认值
Flex 容器默认 align-items: stretch，会让图文高度强行拉齐，结果文字“吊”在图片底部，看起来像没对齐。
- 顶部对齐（最常用）：加
align-items: flex-start - 垂直居中：加
align-items: center，同时确保图片是display: block - 千万别对
<img>设vertical-align——Flex 里它完全无效
图片显示质量与响应式要点
只设宽高不等于显示正常。原始图比例不一，硬拉会模糊或变形。
- 给
<img>加object-fit: cover（填满裁剪）或contain（完整显示），再配width/height才生效 - 小屏下想变上下排列？用媒体查询切
flex-direction: column，别指望flex-wrap自动处理图文关系 - 文字过长要截断：单行加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;；多行建议 JS 控制或用-webkit-line-clamp
防崩细节不能漏
很多布局“看着差不多”，一换图、一填长文本就露馅，问题常出在两个隐形开关上：
- 文字容器必须加
min-width: 0，否则遇到长 URL 或无空格字符串时，flex: 1失效，文字强行撑宽 - 图片加
flex-shrink: 0，防止 Flex 默认压缩导致变形 - 父容器建议设
min-height: 100vh防白屏，内容区用flex-grow: 1自动撑满
