Flexbox可稳定实现侧边栏布局：父容器设display: flex并清除默认样式，侧边栏用flex: 0 0 240px，主内容用flex: 1，配合min-width: 0防溢出，响应式通过媒体查询切换显示或方向，对齐问题由align-items控制。
侧边栏布局不稳定，多数是因为用浮动（float）或传统块级元素强行拼凑导致的。用 Flexbox 实现左右结构，能天然解决高度不一致、换行错位、响应断裂等问题，关键是把容器设为 display: flex，并合理控制子项的伸缩行为。
父容器必须设为 flex 且清除默认间隙
很多问题其实出在第一步：容器没正确启用 Flex 布局，或者被默认样式干扰。
- 给外层容器（比如
.layout）加上display: flex - 加
width: 100%或min-width: 0防止内容溢出撑破布局 - 移除子元素的
float、vertical-align、display: inline-block等旧式写法 - 避免给子项设固定
width同时又用flex，容易冲突
侧边栏固定宽度，主内容自适应
这是最常见需求——左侧菜单宽 240px，右侧内容占满剩余空间。
- 侧边栏：设
flex: 0 0 240px（不放大、不缩小、基准宽 240px） - 主内容区：设
flex: 1（等价于flex: 1 1 auto，自动填充剩余空间） - 如果主内容内部有长文本或图片，记得加
min-width: 0防止它强行撑宽整个 flex 容器
响应式切换：小屏收起侧边栏
Flexbox 本身不处理显示/隐藏，但和媒体查询配合非常自然。
立即学习“前端免费学习笔记（深入）”；
- 默认状态保持左右结构；小屏下（如 max-width: 768px）让侧边栏
display: none - 或者用
flex-direction: column把左右变上下，更利于触摸操作 - 若需动画收起，可结合
max-width+overflow: hidden和transition
内容高度不一致？用 align-items 或 align-self 控制对齐
左右两栏文字行数不同，看起来“不对齐”，其实是默认 align-items: stretch 拉高了短栏。
- 想顶部对齐：父容器加
align-items: flex-start - 只让主内容顶部对齐，侧边栏仍拉满：给主内容加
align-self: flex-start - 不想拉伸任何一栏：统一设
align-items: flex-start，再按需微调 padding/margin
Flexbox 的左右结构本质简单，稳定的关键在于理解 flex 三个值的含义，以及主动约束内容溢出。不需要 JS 计算尺寸，也不依赖 hack，写清楚伸缩规则，布局就稳了。
