Flexbox容器必须设display: flex或inline-flex；商品展示板需设flex-wrap和gap；子项用flex而非width控制宽度；卡片内部用column方向+margin-top: auto钉住价格；响应式需配合min-width和断点。
Flexbox容器必须设为display: flex或display: inline-flex
很多初学者写完.grid类后直接加flex-direction，但忘了声明display属性，导致所有Flex属性完全不生效。浏览器会把它当普通块元素处理。
商品展示板的根容器（比如.product-grid）必须显式设置：
.product-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}gap比用margin更可靠——它不会在容器边缘产生额外空白，也不受box-sizing干扰。老项目若需兼容IE11，得退回到margin + calc()方案，但现在基本可忽略。
子项宽度要用flex而非width控制
给每个商品卡片（.product-card）设width: 25%看似能实现四列，但一旦内容撑开或屏幕变窄，就会溢出或换行错乱。Flex的响应逻辑依赖flex简写属性。
立即学习“前端免费学习笔记（深入）”；
推荐写法（适配常见断点）：
- 桌面端：每行4个 →
flex: 0 0 calc(25% - 12px)（减去gap均摊值） -
平板端（768px起）：每行2个 →
flex: 0 0 calc(50% - 8px) - 手机端：单列 →
flex: 0 0 100%
注意flex: 0 0 ...中第一个0禁用伸缩，第二个0禁用收缩，确保宽度严格按计算值执行，不受内容长度影响。
卡片内部用flex-direction: column对齐图文
商品图、标题、价格常需要顶部对齐+底部价格钉住，纯Flex横向布局没法解决垂直方向的“贴底”需求。这时候要在卡片内部再启一层Flex：
.product-card {
display: flex;
flex-direction: column;
height: 100%;
}
<p>.product-card img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
}</p><p>.product-card .price {
margin-top: auto;
font-weight: bold;
}margin-top: auto是关键——它把.price推到剩余空间底部。前提是父容器有明确高度（如height: 100%）且flex-direction: column已启用。没设height时，卡片高度由内容撑开，auto就无效。
响应式断点要配合flex-wrap和min-width
单纯靠@media改flex值还不够。小屏下如果卡片min-width太小（比如图片压缩失真），或太大（导致单行只能塞1个却强行撑两行），都会破坏体验。
建议组合使用：
- 给
.product-card设min-width: 280px（保障图片可读） - 在
@media (max-width: 767px)里把flex-wrap保持为wrap，同时把flex设为0 0 100% - 避免在
flex中写死px值，全部用百分比或calc()
真正容易被忽略的是：当用户旋转手机（从竖屏切横屏），某些安卓浏览器会触发两次resize事件，导致gap或flex值短暂错乱。加一句will-change: transform到容器上能缓解重绘抖动。
