flexbox 卡片组每行数量不固定，需用 flex-wrap: wrap 配合 min-width 控制断行，避免固定 width 或 flex: 1 导致压缩或留白；通过 min-width 和容器 max-width 实现响应式布局；卡片内用 flex-column+flex: 1 与 aspect-ratio 保障等高和图片不变形；ie11 需降级为 flex: 0 0 宽度值并用 margin 模拟 gap。
Flexbox 卡片组每行数量不固定？用 flex-wrap 和min-width控制断行
Flexbox 本身不会“自动算出每行该放几个”，它只按容器宽度和子项尺寸做流式换行。所谓“自动调整每行数量”，本质是让子项有最小宽度阈值，触发 flex-wrap: wrap 后自然折行。
常见错误是只设 flex: 1 或width: 25%——前者在小屏下压缩卡片到无法识别，后者在非 4 的倍数宽度时留白或溢出。
- 给卡片容器加
display: flex和flex-wrap: wrap - 给每个卡片设
flex: 0 0 auto（禁用伸缩，保留自身宽高） - 用
min-width代替固定width，例如min-width: 280px，这样屏幕够宽就并排，窄了就换行 - 配合
gap控制间距，比margin更干净（IE 不支持，需备选margin）
响应式断点混乱？别用媒体查询硬切列数
为不同屏幕写 @media (max-width: 768px) {.card { width: 50%;} } 看似直观，实则维护成本高：加新尺寸要补多套规则，卡片内容变宽又得调参数。
真正省心的做法是让 min-width 和容器 padding 共同决定实际可用宽度，Flexbox 自己算。
立即学习 “ 前端免费学习笔记（深入）”；
- 容器用
max-width限制最大宽度（如max-width: 1200px），居中时加margin: 0 auto - 卡片
min-width设合理下限（文字能读清、图片不拉伸），比如min-width: 260px适合移动端，320px适合桌面 - 避免在卡片上写
width: calc(33.333% - 1rem)这类计算——Flexbox 会和gap冲突，且 IE 不认calc在width里
卡片高度不一致导致错位？用 align-items: stretch 不够
默认 align-items: stretch 会让卡片拉齐高度，但前提是内容没溢出或设了height。一旦标题行数不同、图片比例不一，视觉上还是参差不齐。
这不是 Flexbox 的错，是内容不可控带来的现实问题。
- 给卡片加
display: flex; flex-direction: column;，再让内容区域用flex: 1占满剩余空间（标题 + 描述部分） - 图片用
object-fit: cover并设固定aspect-ratio（如aspect-ratio: 16/9），防止拉伸变形 - 慎用
height: 100%——父容器没显式高度时，它等于 0，卡片直接塌陷 - 若必须等高，优先用
grid替代（display: grid; grid-template-rows: 1fr），Flexbox 对此天生吃力
IE11 兼容性崩了？这些 Flex 属性要降级
IE11 支持 Flexbox，但语法老、bug 多：flex-wrap偶尔失效，gap完全不认，min-width在 flex: 0 0 auto 下表现异常。
不建议为 IE11 重写整套布局逻辑，但关键降级点必须卡死。
- 用
flex: 0 0 280px代替flex: 0 0 auto+min-width（IE11 里auto常被忽略） -
gap必须配margin回退：给卡片加margin-right和margin-bottom，再用:nth-child(n)清除末尾 - 避免
align-content: flex-start——IE11 对多行 Flex 的align-content支持极差，改用justify-content或 JS 微调 - 测试时打开 IE11 开发者工具，看
computed里flex-basis是否生效，不生效就说明flex简写被解析错了
最麻烦的不是写法，是卡片内嵌的 grid 或position: absolute元素——它们在 Flex 容器里受 IE11 的 transform 影响，定位会漂移。这种时候，宁可拆成两层容器，也别硬扛。
