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