用flex布局实现响应式产品卡片：设flex-wrap换行、calc动态列宽、min-width:0防撑破；图片用aspect-ratio占位+object-fit；价格与按钮用flex-column右对齐；hover仅过渡transform/opacity并启用will-change。
怎么让产品卡片在不同屏幕下都整齐排列
直接用 flex 布局最稳，别一上来就写 grid —— 尤其当产品数量不固定、要兼容老浏览器时。display: flex 配合 flex-wrap: wrap 能自动换行，比浮动或 inline-block 更可控。
关键点：
-
flex-basis设为calc(33.333% - 20px)（三列+间隙），而不是固定像素，避免小屏溢出 - 外层容器加
gap: 16px（现代浏览器）或用margin模拟（旧版兼容） - 每张卡片必须设
min-width: 0，否则图片或长文本会撑破布局
.product-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.product-card {
flex: 1 1 calc(33.333% - 16px);
min-width: 0;
}图片加载失败时怎么不露白底还保持比例
用户网络差或路径错，<img> 默认塌陷，破坏卡片高度一致性。不能只靠 alt 文本顶着，得从结构和样式双保险。
做法：
立即学习“前端免费学习笔记（深入）”；
- 给
<img>外包一层<div class="image-placeholder">，用aspect-ratio: 4/3锁定宽高比 - 失效时用
img::after伪元素显示文字提示，同时设置background-color: #f5f5f5 - 加上
object-fit: cover，避免拉伸变形
.image-placeholder {
aspect-ratio: 4/3;
background-color: #f5f5f5;
overflow: hidden;
}
.image-placeholder img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.image-placeholder img:not([src]), .image-placeholder img[src=""] {
opacity: 0.5;
}价格和“加入购物车”按钮怎么对齐又不挤在一起
常见错误是把价格和按钮全塞进一个 <div> 里用 text-align: right，结果小屏时按钮换行、价格悬空。真需求其实是「价格右对齐，按钮紧贴价格下方、也右对齐」。
推荐结构：
- 用
display: flex; flex-direction: column;容器，再用align-items: flex-end - 价格加
margin-bottom: 8px，按钮加width: 100%（防小屏过窄） - 按钮禁用状态用
opacity: 0.6; pointer-events: none;，比只改颜色更明确
.price-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.price-actions .price {
margin-bottom: 8px;
font-weight: bold;
color: #e63946;
}
.price-actions button {
width: 100%;
max-width: 160px;
}Chrome 浏览器里 hover 动画卡顿怎么办
不是所有 hover 都能直接加 transition: all 0.3s。比如对 height 或 margin 做过渡，会触发重排（layout），尤其卡片多时明显掉帧。
优化方向：
- 只对
transform和opacity过渡，它们走合成层，GPU 加速 - 卡片悬停放大用
transform: scale(1.03)，别用width/height - 加阴影用
box-shadow，但别在悬停时突然加多层阴影——控制在 1–2 个 - 强制开启硬件加速：
will-change: transform;（仅对高频交互元素）
.product-card {
transition: transform 0.2s ease, opacity 0.2s ease;
will-change: transform;
}
.product-card:hover {
transform: scale(1.03);
z-index: 2;
}实际项目里最常被忽略的是：卡片内容长度不一致导致底部对齐错乱。解决它不靠 JS 计算高度，而是用 display: grid 控制内部区域（标题、描述、价格）的隐式行高，或者统一用 line-clamp 截断标题。这点比动画卡顿更影响第一眼观感。
