flex布局比百分比更可靠，因其自动分配剩余空间、处理溢出且不受边框/内边距四舍五入影响；推荐display:flex+flex-wrap:wrap，用gap替代margin，父容器设box-sizing:border-box。
移动端列表用 flex 布局比百分比更可靠
纯百分比宽度在小屏上容易因边框、内边距或四舍五入导致换行错位，flex 能自动分配剩余空间并处理溢出。优先用 display: flex + flex-wrap: wrap，百分比只作为辅助（比如固定图标宽）。
常见错误：给每个列表项设 width: 50% 后发现两列不对齐——其实是父容器有 padding 或子项有 margin，而 flex 默认不包含这些进计算。
- 父容器加
box-sizing: border-box和明确的padding，避免意外撑宽 - 子项用
flex: 0 0 calc(50% - 8px)（减去间隙）比直接写width: 50%更稳 - 用
gap替代margin控制间距，它不参与 flex 项目尺寸计算
flex-wrap: wrap 下如何控制单行显示个数
不能只靠 flex-basis 硬设，需结合容器宽度和响应式断点。例如想在屏幕 ≥ 768px 时一行三列、flex-basis。
注意：iOS Safari 旧版对 gap 支持差，若需兼容 iOS 11–12，得用 margin + nth-child 清除末尾项的右 margin。
立即学习“前端免费学习笔记（深入）”；
- 一行两列：
flex-basis: calc(50% - 8px)+gap: 16px - 一行三列：
flex-basis: calc(33.333% - 10.666px)（因为gap: 16px在三列间产生两个间隙） - 用
@media (max-width: 767px)切换flex-basis值，别依赖 JS 计算
内容高度不一致时，flex 列表怎么对齐底部
默认 align-items: stretch 会让所有项拉满高度，但实际列表常有标题长短不一、描述行数不同等问题。强行拉高反而暴露空白，更合理的是让文字区域底部对齐，而非整个卡片。
关键不是给容器设 align-items: flex-end（那会把整个卡片往下压），而是给内容区单独设 margin-top: auto。
- 卡片内部再套一层
div包住正文，设margin-top: auto推到底部 - 避免对
flex子项用height: 100%，它在无显式高度父容器里无效 - 如果要用等高卡片，必须给父容器设
align-items: stretch并确保子项没min-height干扰
为什么不用 grid？什么情况下该换
flex 处理一维列表（单向流式）足够轻量；但当需要精确控制行列间距、跨列标题、或响应式下改变轨道数量（如 2→3→4 列），grid 的 repeat(auto-fill, minmax(...)) 更直观且容错更强。
不过要注意：Android 4.4 WebView 和部分低端安卓浏览器对 grid 支持极差，上线前务必查 caniuse 数据。业务要求兼容到 Android 4.x 就得退回 flex + 媒体查询组合方案。
- 简单商品列表、新闻摘要 → 用
flex，性能好、fallback 容易 - 后台数据看板、带筛选头的复杂布局 → 用
grid，维护成本更低 - 混用风险：不要在同一个容器上同时写
display: flex和display: grid，后者会完全覆盖前者
实际项目中最容易被忽略的是 gap 的兼容性补丁和 flex-basis 中 calc 表达式的括号匹配——少一个括号，整行 flex 就退化成默认 flex-basis: auto，列表瞬间变成单列。
