并排显示需将display: flex设在父容器而非子元素；换行需设置flex-wrap: wrap并约束子项宽度；间距优先用gap属性；ie11兼容需避免flex简写，改用三值语法。
div 并排显示不生效？检查 display: flex 是否写在父容器上
很多人把 display: flex 加在每个子 div 上，结果毫无反应——Flex 是父容器的布局模式，子元素只是“被安排”的对象。父容器没设 display: flex，再多个 div 也还是默认的块级流式堆叠。
- 正确做法：给包裹这些
div的外层容器（比如section或div class="container"）加display: flex - 常见错误：
.item { display: flex; }—— 这会让每个div自己变成一个 flex 容器，和并排无关 - 如果父容器是
inline元素（如span），需先确保它能容纳 flex 布局，通常改用div更稳妥
并排后换行错乱？重点看 flex-wrap 和子项宽度
默认情况下，flex-wrap: nowrap，所有子项会强行挤在同一行，超出就溢出或缩小。想自动换行，必须显式设置 flex-wrap: wrap；但光这样还不够，子项得有明确宽度约束，否则浏览器可能按内容撑开，导致换行不可控。
-
flex-wrap: wrap是换行的前提，不写就永远不折行 - 子项推荐用
flex: 1 1 auto或固定width（如width: 200px），避免依赖内容宽度 - 注意
min-width: auto（默认值）可能导致文字多的项撑宽，建议加min-width: 0配合overflow: hidden防溢出
间距不均匀？别只靠 margin，优先用 gap
gap 是 Flex 布局原生支持的间隙控制属性，比手动给每个子项加 margin 更干净、更可靠——尤其没有“首尾多出空白”的问题，也不用担心 margin-collapse 干扰。
-
gap: 12px同时控制行内和行间间隙；row-gap和column-gap可单独控制 - 旧版浏览器（如 IE）不支持
gap，若需兼容，退回到margin方案时记得用:not(:first-child)过滤首项 -
gap在flex-direction: column下依然有效，这点比margin更直观
IE11 兼容性踩坑：别用 flex: 1 简写，改用完整三值
IE11 对 flex 简写的解析有 Bug，flex: 1 会被当作 flex: 1 1 0%，导致子项宽度计算异常。实际项目中只要还支持 IE11，就得绕开简写。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：
flex: 1 1 0px或flex: 0 0 auto，明确写出三个值 -
flex-basis推荐用0px而非0%，避免 IE11 把百分比解析为容器宽度的 0%，而非“无基准” - 另外，IE11 不支持
gap，必须用margin+calc()模拟，例如width: calc((100% - 24px) / 3)（3 列，2 个 12px 间隙）
Flex 并排看着简单，真正卡住人的往往不是语法，而是父容器缺失、换行逻辑没打开、或者一个 flex: 1 在 IE 里悄悄崩了布局——这些点不验证一遍，调试时容易反复怀疑 CSS 写错了。
