Flex布局左右分栏技巧详解

本文深入解析了如何用 Flexbox 精准实现左右分栏布局，破除“仅靠 justify-content 就能分栏”的常见误区，强调核心在于父容器设置 display: flex 与明确宽度、子项合理运用 flex 属性（如等宽用 flex: 1 / flex: 1，不等宽按权重设 flex: 2 / flex: 1，固定+自适应则左栏用 width、右栏用 flex: 1），并重点提醒 min-width: 0 防止内容溢出、避免 margin 与 justify-content 混用、警惕 IE 兼容性陷阱等实战高频坑点——帮你从“写出来”真正进阶到“稳运行”。

用 display: flex 实现左右两栏，别只调 justify-content

只靠 justify-content: flex-start 或 flex-end 无法让两个栏并排显示——它们只是控制主轴上的对齐方式，前提是容器里真有多个子元素且默认不换行。左右两栏本质是「分配宽度 + 水平排列」，关键在 flex-direction、flex-wrap 和子项的 flex 行为。

• justify-content 只在主轴上有多个弹性子项且存在剩余空间时才起作用；如果只有一栏占满，它根本没效果
• 默认 flex-direction: row 是对的，但必须确保父容器有明确宽度（比如 width: 100%），否则可能撑不开
• 子元素不要设固定 width 后又用 flex，容易冲突；推荐统一用 flex: 1、flex: 2 这类相对分配

左右等宽 / 不等宽的写法差异

等宽最简单：两个子项都设 flex: 1；不等宽则按比例设，比如左栏占 2/3、右栏占 1/3，就用 flex: 2 和 flex: 1。注意这不是像素值，而是「剩余空间的分配权重」。

.container {
  display: flex;
}
.left {
  flex: 2; /* 占剩余空间的 2 份 */
}
.right {
  flex: 1; /* 占剩余空间的 1 份 */
}

如果希望左栏固定 200px、右栏自适应，写法不同：

.left {
  width: 200px;
}
.right {
  flex: 1; /* 剩余所有空间都给它 */
}

常见翻车点：内容溢出、换行、margin 干扰

Flex 子项默认不换行（flex-wrap: nowrap），但如果内容过长又没设置 min-width: 0，文字会强行撑宽容器甚至溢出。特别是内嵌图片、长单词或未设 overflow 的文本块。

• 给子项加 min-width: 0，允许其收缩（尤其当内部有 white-space: nowrap 或图片时）
• 避免对子项设 margin 后再用 justify-content: space-between，容易误判间隙来源
• 不用 float 或 inline-block 混搭，flex 容器内浮动会失效

兼容性提醒：IE10/11 的 flex 写法要加前缀

如果必须支持 IE10–11，display: flex 需补 display: -ms-flexbox，flex: 1 要写成 -ms-flex: 1，且不能用 flex: 0 0 auto 这类简写。现代项目可忽略，但上线前建议查下目标用户 UA 统计。

真正卡住人的往往不是“怎么写”，而是“为什么写了没反应”——多数时候是父容器没设宽度、子项写了 width 却又没关 flex-shrink，或者忘了清除浮动遗留影响。先检查 computed style 里 display 是否真生效，再看子项的 flex-basis 计算值。

到这里，我们也就讲完了《Flex布局左右分栏技巧详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！