如何通过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 行为，限制收缩。