必须用容器级布局控制逻辑：父容器设display: flex+align-items: stretch，每张卡片用flex-column+flex: 1撑内容区，按钮加margin-top: auto沉底，图片设object-fit: cover并约束父容器高度。
Flex布局里商品卡片高度不一致怎么对齐
商品卡片内容长度不同，用 display: flex 默认会顶部对齐，导致底部参差不齐——这不是bug，是 align-items: stretch 的默认行为。要让所有卡片底部对齐或等高，必须显式控制。
常见错误是只给容器加 align-items: flex-end，结果文字挤到最底下，按钮错位。真正靠谱的做法是：容器设 align-items: stretch（保持默认），再给每张卡片加 display: flex; flex-direction: column;，然后用 margin-top: auto 推按钮到底部。
- 卡片内部用
flex: 1包裹内容区（如标题、描述），让其撑满剩余空间 - 价格/按钮这类底部元素直接加
margin-top: auto，比align-self: flex-end更稳定 - 避免在卡片上设固定
height，否则响应式时容易溢出或留白
多行商品卡片换行后间距错乱怎么办
用 flex-wrap: wrap 做多行布局时，左右边距不对称、行与行之间空隙过大，本质是没处理好 gap 和 margin 的叠加关系。现代浏览器支持 gap，但 IE 不支持，得留退路。
比如设了 gap: 16px，又给卡片加 margin: 8px，实际间距就变成 24px，且首尾多出空白。正确做法是只用 gap 控制间隙，卡片自身不设外边距。
立即学习“前端免费学习笔记（深入）”；
- 容器用
gap: 16px统一控制行列间距（Chrome 100+ / Firefox 89+ / Safari 14.1+ 支持） - 兼容旧浏览器时，用
margin-right和margin-bottom模拟 gap，但最后一列要清掉margin-right（可用:nth-child(3n)配合） - 避免同时使用
gap和margin，否则调试时很难判断空白来源
商品卡片里图片和文字比例失衡怎么调
图片宽高比不统一，文字区域被压缩或撑开，是因为没限制图片的拉伸行为，也没约束文字容器的弹性分配。Flex 本身不管图片尺寸，全靠子元素自己守规矩。
典型表现是小图配大标题，卡片整体被标题撑高；或者大图没约束，横向溢出容器。关键不是“让图片自适应”，而是“让图片区域有明确边界”。
- 图片父容器（如
.card-image）设flex-shrink: 0; width: 100%; height: 160px;，再用overflow: hidden - 图片本身设
width: 100%; height: 100%; object-fit: cover;，确保裁剪不拉伸 - 文字区用
flex: 1 1 auto，允许收缩但不缩小到 0，避免标题被压扁
移动端卡片堆叠顺序和桌面端不一致怎么修复
想在手机上把价格提到标题上面，桌面端保持原顺序，别硬切 DOM 或写两套 HTML。Flex 的 order 属性就是干这个的，但很多人忘了它只影响视觉顺序，不影响语义流和键盘焦点顺序。
如果只改 order，屏幕阅读器和 Tab 键还是会按 HTML 顺序走，可能造成可访问性问题。所以优先用 CSS Grid 做复杂重排，Flex 的 order 仅用于简单上下调整。
- 给价格元素设
order: -1，标题设order: 0（默认），就能让它浮到最前 - 配合媒体查询：
@media (max-width: 768px) { .price { order: -1; } } - 注意：若卡片内有表单控件或链接，
order可能打乱操作逻辑，此时应改用grid-template-area重新定义区域
flex-direction: column 和外部容器的 flex-wrap 配合节奏——前者管单卡结构，后者管多卡排列，混在一起调很容易互相干扰。先定好哪一层负责什么，再动属性。 
