css 想实现左右两栏布局怎么办_display flex 配合 justify-content flex-start flex-end

用 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 计算值。