flex-wrap: wrap 必须加，否则卡片在小屏上会溢出或被压缩变形；配合 flex: 1 0 280px、align-items: flex-start、justify-content 调整及避免嵌套 flex，才能实现真正响应式布局。
flex-wrap: wrap 必须加，否则卡片在小屏上会溢出或被压缩变形，这是最常漏掉的一行。
文章列表容器必须设 flex-wrap: wrap
很多人只写 display: flex 就以为完事了，结果在手机上所有卡片挤成一排、文字折行错乱、甚至横向滚动。根本原因是 Flex 默认不换行——flex-wrap: nowrap 是隐式值。
- 不加
flex-wrap: wrap：卡片强行横排，超出容器宽度时直接溢出或缩小失真 - 加了之后：自动按容器宽度折行，每行数量随屏幕变化，天然响应式
- 搭配
gap使用更稳妥，比用margin避免首尾/行列间隙不一致问题
flex: 1 0 auto 比固定宽度更适合文章卡片
写死 width: 48% 看似简单，但遇到标题过长、标签多、缩略图比例不一等情况，容易撑破或留白过大。用弹性占比更鲁棒。
-
flex: 1 0 280px表示“基础宽度 280px，可伸缩，不缩小”——桌面端三列，平板两列，手机一列 - 避免用
flex: 1单独出现，它等价于flex: 1 1 0，会导致卡片在窄屏下被过度压缩 - 如果卡片内容高度差异大（比如有的带图、有的纯文字），记得给容器加
align-items: flex-start，防止底部不对齐
移动端对齐和间距要单独处理
桌面端用 justify-content: space-between 很清爽，但手机上首尾卡片离边距太远，视觉松散；同时 gap 在旧版 Safari 中支持不全，得备选。
- 小屏下改用
justify-content: center+gap，让卡片居中堆叠，阅读节奏更稳 - 若需兼容 iOS 14.5 以下，用
margin替代gap，但要配合:nth-child清除首尾外边距 - 别忽略
align-content: flex-start——当换行后行数不确定时，它控制多行整体在交叉轴（垂直方向）的起始位置，避免空白撑高容器
卡片内部结构别再嵌套 Flex 控制图文混排
很多人为让图片右置、标题左对齐，给每个卡片又套一层 display: flex，结果层级过深、调试困难、align-self 行为难预测。
- 图片用
align-self: flex-end+max-width: 45%即可脱离文字流右贴边，无需额外容器 - 正文段落保持块级默认行为，靠
margin或gap分隔，比 Flex 内部对齐更可控 - 标签栏用
display: flex; flex-wrap: wrap; gap: 6px，比浮动或 inline-block 更易维护，且支持单行滚动
真正卡住人的不是属性记不住，而是没意识到 flex-wrap 和 flex-basis 的组合决定了卡片能否“呼吸”——太死板的尺寸和太激进的伸缩，都会让列表失去内容自适应能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
