当 Flex 容器从 row 切换为 column 时，子项默认不再受 max-width 约束而收缩——需显式设置 width: 100% 配合 max-width 才能确保响应式列布局下各卡片等宽且不溢出。
当 flex 容器从 `row` 切换为 `column` 时，子项默认不再受 `max-width` 约束而收缩——需显式设置 `width: 100%` 配合 `max-width` 才能确保响应式列布局下各卡片等宽且不溢出。
在使用 Flexbox 构建响应式定价卡片（Pricing Table）时，一个常见误区是：仅依赖 max-width 控制子元素宽度。例如，.pricing-plan 设置了 max-width: 300px，在 flex-direction: row 下表现正常；但一旦在媒体查询中切换为 column，子元素会“塌陷”成内容宽度（shrink-to-fit），导致卡片宽度参差不齐、失去对齐与一致性。
根本原因在于：Flex 项目在 column 主轴方向上，其交叉轴（即水平方向）的尺寸默认由内容决定，flex: 1 和 max-width 并不会自动触发 100% 拉伸。此时必须显式声明 width: 100%，使子项在垂直布局下占据父容器全宽（同时受 max-width: 300px 限制，避免超宽）。
✅ 正确做法是在媒体查询生效前，为所有直接子项添加：
.pricing-container > div {
width: 100%;
}该规则确保：
- 在大屏（
row）下，flex: 1仍主导弹性分配，width: 100%被忽略（无副作用）； - 在小屏（
column）下，width: 100%生效，结合max-width: 300px，实现「尽可能宽但不超过 300px」的响应式效果； - 所有卡片严格等宽，视觉秩序清晰，居中对齐（得益于父容器
justify-content: center）。
⚠️ 注意事项：
- 不要写成
.pricing-plan { width: 100% }—— 这会在row模式下强制拉满父容器宽度，破坏横向布局； - 推荐使用
> div或更语义化的.pricing-container > .pricing-plan，精准作用于直系子元素； - 若后续增加非卡片子元素（如标题、分隔线），应调整选择器以避免误匹配；
-
gap在column模式下依然有效，无需额外处理。
最终，配合已有的 @media (max-width: 1000px) 规则，即可实现平滑的移动优先响应式切换：桌面端三栏并排，移动端单栏堆叠且每张卡片宽度统一、边界可控、视觉专业。
