最可控的响应式卡片列数控制方式是flex-basis配合@media，但必须配flex-wrap:wrap和精确calc()计算，否则易水平滚动或列数错乱；单纯flex:1 1 250px因优先满足min-width而破坏可读性。
Flex 布局做响应式卡片列表，flex-basis 配合 @media 是最可控的方式，但必须配 flex-wrap: wrap 和精确 calc()，否则小屏下容易水平滚动或列数错乱。
为什么不能只用 flex: 1 1 250px
浏览器会优先满足 min-width（即 flex-basis），而不是保证可读性。比如在 412px 宽的安卓屏上，250px 卡片 + gap 会导致单列溢出，文字被压缩变形。它控制的是“基础尺寸”，不是“最大宽度”，也不阻止拉伸。
-
flex: 1 1 250px在中等宽度视口（如 iPad 横屏 ≈1024px）可能意外撑出 4 列，而你只想要 3 列 - 没有
flex-wrap: wrap时，卡片会被强行压扁成一行，破坏布局 - 没设
box-sizing: border-box的父容器，在小屏下 padding/gap 叠加后极易触发水平滚动
@media 中 flex-basis 的 calc 写法
每个断点要明确目标列数，并用 calc() 扣除 gap 占比。单位必须统一（全用 % 或全用 px），混用会失效。
- 双列（481px–768px）：
.card { flex: 1 1 calc(50% - 8px); }（对应gap: 16px，每行一个间隙） - 三列（≥769px）：
.card { flex: 1 1 calc(33.333% - 12px); }（gap: 16px时，三列需减去两个间隙） - 四列（≥1280px）：
.card { flex: 1 1 calc(25% - 12px); }（同理，三个间隙共 48px，均摊到每项是 12px）
卡片内部高度不一致怎么 fix
align-items: stretch 只对同一行生效，但内容长度不同会导致每行高度独立计算，底部错位。这不是 Flex 容器的问题，而是卡片内部结构没约束。
- 给
.card加display: flex; flex-direction: column; - 内部内容用
justify-content: space-between固定标题、描述、按钮的位置 - 图片区域设
flex-shrink: 0并配合object-fit: cover，防止拉伸变形 - 避免仅靠外部
align-items，它无法解决跨行等高问题
真正难的不是写断点，而是确定断点值——别抄“768px”，打开 DevTools 拖动窗口，盯着卡片内文字是否开始折行、图片是否被压扁，那个临界宽度才是你该写的 max-width。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
