用 display: flex 实现左右两栏需设置父容器 display: flex 并确保有明确宽度，子项通过 flex 属性分配空间：等宽用 flex: 1 和 flex: 1，不等宽按比例设如 flex: 2 与 flex: 1，固定+自适应则左栏设 width、右栏设 flex: 1；注意 min-width: 0 防溢出，避免 margin 与 justify-content 混用。
用 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 计算值。
