两栏布局用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 最稳妥：
