直接写 flex: 1 会让三栏在小屏上挤成一条线，是因为 flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0，且父容器默认 flex-wrap: nowrap，导致空间不足时子项强行压缩而非换行。
为什么直接写 flex: 1 会让三栏在小屏上挤成一条线？
因为 flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0，它会无条件瓜分剩余空间——但前提是三栏还在同一行。一旦容器宽度不够，flex-wrap: wrap 没开，它们就硬扛着不换行，视觉上被压缩到几乎看不见；开了 flex-wrap: wrap 又会变成上下堆叠，破坏“横向展示产品”的语义。
- 给每个产品卡片加
min-width: 280px（略大于常见手机竖屏宽度） - 容器必须设
flex-wrap: wrap - 别用
flex-basis: 33.33%，小数精度 + 边框/内边距会导致总宽超 100%，直接触发换行 - 主容器宽度要明确，比如
width: 100%或max-width: 1200px，否则 Flex 计算剩余空间可能为 0
怎样让桌面三栏、平板双栏、手机单栏真正平滑切换？
靠单一 @media (max-width: 768px) 不够。实际内容撑开程度才是断点依据：文字多的页面可能在 900px 就该收窄，极简图册可能到 1200px 才需调整。
- 桌面端（≥1024px）：
.product-grid { display: flex; gap: 1.5rem; }+ 三栏各设flex: 0 0 calc(33.333% - 1rem)（减去 gap 占位） - 平板（768px–1023px）：
@media (min-width: 768px) and (max-width: 1023px)中，左栏隐藏、右栏设flex: 0 0 240px，主产品区flex: 1 1 auto - 手机（flex-direction: column，所有栏
width: 100%，flex: none
gap 和 margin 在产品卡片间混用会出什么问题？
gap 是 Flex/Grid 原生间距控制，不参与外边距折叠；margin 则会和相邻元素发生折叠，尤其在卡片高度不一致时，底部对齐错乱更明显。
- 统一用
gap: 1.5rem，比手动给每张卡片加margin-right+margin-bottom更干净 - IE11 不支持
gap，但已基本可忽略；若真需兼容，改用margin并配合:not(:last-child)控制右侧/底部间隔 - 卡片内部文字溢出时，
overflow: hidden; text-overflow: ellipsis;必须配white-space: nowrap，否则截断无效
产品图和标题高度不一致时，怎么避免三栏底部参差不齐？
默认 align-items: stretch 会让所有卡片拉伸等高，但前提是父容器有明确高度来源。如果只是内容区域自然撑高，而卡片里图片没设 height 或 object-fit，高度就会随内容浮动。
- 给卡片设
display: flex; flex-direction: column; height: 100% - 图片用
height: 180px; object-fit: cover;固定尺寸 - 标题区域加
flex: 1; min-height: 0;，防止min-height阻碍 Flex 内部滚动 - 别在卡片上设
height: 300px这类固定值——不同设备像素比下会失真
真正难的是保持卡片视觉节奏一致：图、标题、描述、按钮四层结构在不同断点下的垂直比例分配，这没法靠 Flex 一行代码解决，得结合 clamp() 或 JS 动态重置行高。但至少，别让 flex: 1 成为第一反应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
