卡片高度不一致、按钮悬空、换行错乱的根源在于未正确设置flex方向与子项生长逻辑：需为.card设display: flex; flex-direction: column;，.card__content加flex-grow: 1;，图片控高宽比，并用flex: 1 1 calc()响应式列数。
直接用 display: flex + flex-wrap: wrap 就能撑起多列商品卡片，但卡片内部高度不一致、按钮悬空、移动端换行错乱——这些不是 Flex 本身的问题，而是没设对容器方向和子项生长逻辑。
为什么卡片高度不等、底部按钮总飘在中间
根本原因是卡片容器没启用垂直空间分配能力。Flex 默认主轴是水平的（flex-direction: row），此时 margin-top: auto 或 justify-content: space-between 对“底部对齐”完全无效。
- 必须给每个
.card显式加display: flex; flex-direction: column; - 文字区域（如
.card__content）要加flex-grow: 1;，它才会吃掉剩余高度，把价格和按钮“顶”到底部 - 图片区域务必控制高宽比，比如
aspect-ratio: 4/3;或min-height: 180px;，否则不同图高会直接拉崩整行卡片高度
如何让卡片在不同屏幕下自动调整列数
靠 flex: 1 1 配合 calc() 是最稳的写法，比单纯用 width 更适应 gap 和 padding 变化。
- 大屏（≥1200px）：每行 4 列 →
flex: 1 1 calc(25% - 1rem);（假设gap: 1rem） - 平板（768px–1199px）：每行 2 列 →
flex: 1 1 calc(50% - 0.5rem); - 手机（flex: 1 1 100%;
- 外层容器必须设
display: flex; flex-wrap: wrap; gap: 1rem;，gap比margin更干净，不会干扰flex计算
哪些地方容易被忽略导致布局断裂
不是代码写错，而是几个隐性前提没满足，Flex 就会“假装正常工作”，实则失效。
立即学习“前端免费学习笔记（深入）”；
-
box-sizing: border-box;必须全局设好，否则 padding/border 会撑出意外宽度，让calc(25% - 1rem)失效 - 按钮必须是
.card的**直接子元素**，如果包在.actions里，margin-top: auto要加在.actions上，而不是button - 别用
<table> 套卡片结构——<code><tr> 和 <code><td> 的盒模型与 Flex 冲突，<code>vertical-align在响应式下完全失控 - 移动端点击热区至少 44px，按钮或整个
.card的min-height别低于这个值，否则触控体验差
真正卡住人的从来不是“怎么写 Flex”，而是没意识到：卡片内部的垂直对齐依赖 flex-direction: column 这个开关，而列数切换依赖的是 flex 的弹性计算而非固定 width —— 这两点一旦漏掉，后面所有样式都在补洞。
