flex: 1 是最直接可控的方式，等价于 flex: 1 1 0%，让中间栏占满左右固定栏腾出的剩余空间；需父容器设 display: flex、左右栏用 flex: 0 0 宽度固定、避免 margin 干扰，gap 替代 margin 控制间距。
中间栏用 flex: 1，不是 flex: auto 或 flex: 0 1 auto
中间栏“居中”本质是让它占满左右固定栏腾出的剩余空间，而不是靠 margin 或 text-align 拉过去。用 flex: 1 是最直接、最可控的方式——它等价于 flex: 1 1 0%，明确告诉浏览器：“我不要初始尺寸，只拿走所有剩的空间，且不收缩”。
常见错误是写成 flex: 0 1 auto，这会让中间栏先按内容宽度渲染，再尝试伸缩，一旦内容变宽（比如长文本或图片），它就可能撑破布局或意外换行。
另外，别给中间栏设 margin: 0 auto：它在 flex 容器里无效，因为 auto margin 在主轴方向（水平）会被 flex 分配逻辑覆盖。
左右栏必须锁定尺寸，且不能依赖 margin 控制间距
左栏和右栏要用 flex: 0 0 200px（或直接 width: 200px）固定宽度，flex-shrink: 0 防止被压缩。
如果用 margin 给左右栏加间隔，比如 margin-right: 12px，会导致 flex 计算剩余空间时把 margin 算进去，中间栏实际可用宽度变小，还可能触发滚动条或换行。
正确做法是父容器上统一用 gap: 12px——它只作用于 flex 项之间的空隙，不参与尺寸计算，也不影响 flex: 1 的分配逻辑。
父容器必须设 display: flex，且子元素顺序无关
Flex 布局不依赖 HTML 元素顺序，中间栏写在左/右栏前面、中间、后面都一样生效，这点比 float 或 absolute 定位可靠得多。
但必须确保父容器有明确的 display: flex 和宽度约束（比如 width: 100% 或设为 block 级容器），否则 flex 项可能溢出或塌陷。
如果中间栏内容是文字或图片，默认会左对齐，这不是“没居中”，而是内容对齐方式问题——此时该调 text-align: center 或 justify-content: center（后者只对 flex 项本身有效，不影响内部文本）。
IE10+ 能用，但 IE10/11 对 gap 不支持
如果项目还要兼容 IE10/11，gap 得降级：
• 改用左右栏的 margin（接受它干扰空间计算的风险，或手动减去 margin 值来调整中间栏 flex-basis）
• 或者用伪元素 + flex: 0 0 12px 插入间隔项，更稳妥
• flex: 1 在 IE10/11 中表现正常，无需 polyfill
真正容易被忽略的，是把“中间栏占满剩余空间”和“中间栏内部内容水平居中”混为一谈——前者靠 flex 分配，后者靠 text-align 或 justify-content，两件事得分开处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
