如何通过Flexbox CSS实现简洁的两栏网页布局？

本文共计733个文字，预计阅读时间需要3分钟。

不需要额外+wrapper或浮动+hack，父容器设置+display: flex+就能自然分栏。关键在子元素的+flex+分配逻辑：

• flex: 1 让两栏等宽（比如侧边栏和主内容区）
• flex: 0 0 240px 固定侧边栏宽度，主内容区用 flex: 1 自适应剩余空间
• 避免对子元素设 width，否则可能和 flex 冲突导致布局异常

左侧固定 + 右侧自适应的常见错误

很多人写成这样：.sidebar { width: 240px; } + .main { flex: 1; }，结果右侧没占满。原因在于：width 会触发 flex item 的 min-width: auto 行为，限制收缩。

• 正确做法：去掉 width，改用 flex: 0 0 240px（即不放大、不缩小、基准宽 240px）
• 或者显式设 min-width: 0 在右侧元素上，解除默认最小宽度限制
• 浏览器兼容性注意：IE10/11 对 flex: 1 解析有偏差，建议补全 flex: 1 1 0

响应式切换：从两栏到单栏

移动端通常需要堆叠显示，靠 @media 改父容器 flex-direction 最稳妥：

@media (max-width: 768px) { .container { flex-direction: column; } .sidebar { flex: none; width: 100%; } }

• 不要只改子元素 width，否则 flex 仍按 row 排列，容易溢出
• 如果侧边栏在小屏要隐藏，用 display: none 而非 visibility: hidden，避免占位
• flex-direction: column 后，align-items 控制水平对齐，别漏掉

justify-content 和 align-items 别乱用

两栏布局中，这两个属性常被误加——它们控制的是 flex 容器内“所有子项”的整体对齐，不是单个栏的定位。

立即学习“前端免费学习笔记（深入）”；

• 想让主内容区垂直居中？该在它自己内部用 flex，而不是在两栏容器上设 align-items: center
• justify-content: space-between 会让两栏间距拉满，但若只有两个子项，实际效果和 flex: 1 + margin 差不多，反而更难控制
• 真正需要的是 align-self（作用于单个子项），比如让侧边栏顶部对齐而主内容区居中

Flexbox 实现两栏看似简单，但细节全在 flex 的三个参数含义、min-width 默认行为、以及响应式时 flex-direction 切换的副作用里。稍不注意，就会出现滚动条意外出现、宽度计算错乱、或媒体查询失效的情况。