用 display: flex + flex: 0 0 240px 控制左栏，flex: 1 控制右栏；主区加 box-sizing: border-box 防 padding 溢出；ie11 需 width: 100%、min-width: 0 等兼容处理；响应式优先单栏，双栏切换用 flex-direction 或 order。
flex布局中left-sidebar固定宽度、right-main自适应怎么写
直接给结论：用 display: flex + flex: 0 0 [width] 控制侧边栏，flex: 1 让主内容撑满剩余空间，这是最稳的两栏自适应方案。
别用 float 或绝对定位硬凑，也别给主区域设 width: calc(100% - 200px) —— 那种写法在缩放、响应式或嵌套容器里极易错位。
-
flex: 0 0 240px表示“不放大、不缩小、基准宽240px”，比单纯写width: 240px更可靠，能防止内容撑开侧栏 - 主区域必须用
flex: 1（等价于flex: 1 1 auto），不是flex: 1 1 0—— 后者在某些浏览器下会触发最小内容宽计算异常 - 父容器一定要有明确高度来源（比如
min-height: 100vh或继承自 body 的高度），否则 flex 项可能塌陷
为什么main区域加了padding后布局错位
常见现象：左侧240px，右侧加了 padding: 20px，结果右侧溢出、出现横向滚动条。
原因在于 flex: 1 默认按 content-box 计算尺寸，padding 会额外加在分配到的宽度上。解决方案只有两个：
立即学习“前端免费学习笔记（深入）”；
- 给
main区域加box-sizing: border-box—— 最推荐，一劳永逸 - 改用
padding-inline: 20px（现代浏览器），它不参与 flex 基准宽计算，但兼容性略差（IE 不支持）
别试图用负 margin 抵消 padding，那会让后续嵌套布局更难维护。
IE11下flex两栏布局突然失效怎么办
IE11 对 flex: 1 解析有 bug：当父容器没设 width 或 max-width，且子项含 min-width 时，主区域可能收缩为 0。
实操补救措施：
- 给父容器显式加
width: 100%（哪怕它本该是自动的） - 侧边栏改用
flex: 0 0 auto+width: 240px双保险 - 主区域写成
flex: 1 1 0并加min-width: 0—— 这个组合在 IE11 中最稳定
注意：IE11 不支持 gap，间距必须用 margin 或 padding 实现。
响应式断点里如何安全切换为单栏
关键不是“隐藏侧边栏”，而是让整个 flex 容器退回到文档流自然排列。直接 flex-direction: column 会导致顺序错乱（比如侧栏跑到 main 下面，但语义上它该在顶部导航之后）。
- 移动端优先？那就默认单栏，只在
@media (min-width: 768px)里启用display: flex - 如果必须保留双栏结构再切单栏，用
order调整视觉顺序，而不是靠 DOM 位置 - 切单栏时，记得把侧栏的
flex值重置为flex: none，避免它意外参与高度计算
flex 布局的“自适应”本质是空间分配逻辑，不是简单的显示/隐藏——这点容易被忽略，尤其在嵌套多层 flex 容器时，一个没关掉的 flex: 1 就能让整块区域高度失控。
