<p>零基础可直接抄用，但需理解“自适应”依赖容器、项目、断点三者配合；Flex 是现代卡片布局标准，因天然支持对齐、换行与伸缩；父容器设 display: flex + flex-wrap: wrap，子项用 flex: 0 0 calc(33.333% - 1rem) 并 box-sizing: border-box；移动端通过 @media 重置 flex-basis 实现单栏；优先用 gap 控制间距，兼容性不足时退至 margin；卡片等高靠 flex-column + flex: 1，图片用 object-fit: cover，文字截断用 -webkit-line-clamp。</p>
零基础也能直接抄用，但必须理解“自适应”不是靠一个属性搞定的，而是容器、项目、断点三者配合的结果。
为什么 display: flex 是分栏卡片布局的起点
不用 float 或 inline-block，因为它们对响应式支持差、清除浮动易出错、等高难保障。Flex 布局天然支持主轴对齐、换行控制和子项伸缩，是现代卡片布局的事实标准。
- 父容器加
display: flex+flex-wrap: wrap，让卡片自动折行 - 每个卡片设
flex: 0 0 calc(33.333% - 1rem)（三栏，留间隙），而不是固定像素宽度 - 务必设置
box-sizing: border-box，否则 padding 和 border 会撑破计算宽度
移动端怎么让卡片从三栏变成单栏？用 @media 而不是 JS
响应式核心在 CSS 媒体查询，不是靠 JavaScript 动态改 class。关键是要在断点处重置子项的 flex-basis，而非只改父容器。
- 常见断点：
@media (max-width: 768px)下把卡片设为flex: 0 0 100% - 别只写
width: 100%—— Flex 项目优先尊重flex-basis，width可能被忽略 - 间隙统一用
gap（推荐）或margin，避免在媒体查询里重复调 margin
gap 和 margin 选哪个？优先用 gap，但注意兼容性
gap 是 Flex 和 Grid 的原生间距属性，语义清晰、不触发 margin 折叠、不影响盒模型计算。但它在旧版 Safari（≤14.1）和 IE 中不支持。
立即学习“前端免费学习笔记（深入）”；
- 如果只需支持现代浏览器，直接写
gap: 1rem，父容器上一行代码搞定行列间距 - 若需兼容 Safari 14 及更早版本，退回到
margin：给卡片加margin-right和margin-bottom，再用:nth-child清除每行末尾的右 margin - 不要混用
gap和margin，容易导致间距加倍
卡片内容高度不一致时，如何保持整齐？靠 align-items 不够
align-items: stretch 默认会让卡片等高，但前提是内容没溢出或设了 min-height。实际中标题长短、图片尺寸不同，常导致卡片底部参差。
- 给卡片加
min-height: 100%（配合父容器height: 100%或display: flex）效果有限，更可靠的是用display: flex; flex-direction: column再设内容区域flex: 1 - 图片记得加
object-fit: cover和固定宽高比容器，否则拉伸变形 - 文字截断用
display: -webkit-box+-webkit-line-clamp，纯 CSS 控制行数，比 JS 截取更轻量
真正卡住初学者的，往往不是语法，而是没意识到：Flex 容器的 flex-direction 和子项的 flex 缩写值之间存在隐式依赖，改一个参数可能让整行布局崩掉。动手前先确认父容器是否设置了 flex-wrap，再看子项的 flex-basis 是否与断点匹配。
