两栏布局用display: flex最直接，父容器设flex即可；子元素用flex: 1等宽或flex: 0 0 240px固定侧边栏+flex: 1自适应主内容；避免width导致min-width: auto限制收缩；IE需补全flex: 1 1 0；响应式用flex-direction: column切换堆叠，并注意align-items等属性作用对象。
两栏布局用 display: flex 最直接的写法
不需要额外 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（作用于单个子项），比如让侧边栏顶部对齐而主内容区居中
flex 的三个参数含义、min-width 默认行为、以及响应式时 flex-direction 切换的副作用里。稍不注意，就会出现滚动条意外出现、宽度计算错乱、或媒体查询失效的情况。 
