用Flex布局实现左右侧边栏结构，核心是容器设display: flex，侧边栏用flex: 0 0 240px固定宽，主内容用flex: 1自适应剩余空间；支持等比分配（如flex: 1和flex: 3）与响应式切换（媒体查询+flex-direction: column）。
用 Flex 布局实现左右结构的侧边栏，核心是把容器设为 display: flex，再控制主内容区和侧边栏的宽度与伸缩行为。不依赖浮动或定位，语义清晰、响应友好。
基础左右结构（固定侧边栏 + 自适应主内容）
这是最常用场景：左侧固定宽度导航栏，右侧撑满剩余空间。
- 给父容器（如
或包裹和的）设置display: flex- 侧边栏（
aside）设固定宽，例如width: 240px；也可用flex: 0 0 240px（不缩放、不增长、基准宽 240px）- 主内容区（
main）设flex: 1，自动占据剩余空间.layout { display: flex; height: 100vh; /* 若需全高，记得父级也设高度 */ } aside { width: 240px; /* 或 flex: 0 0 240px */ background: #333; color: white; } main { flex: 1; /* 等价于 flex: 1 1 0 */ padding: 20px; overflow-y: auto; }等宽/比例分配（如 3:1 或 2:1）
当希望主次区域按比例分配宽度，而非固定像素时，直接用
flex的三个参数控制。- 例如侧边栏占 1/4，主内容占 3/4：侧边栏写
flex: 1，主内容写flex: 3 - 注意：此时
flex-basis默认为0%，所以比例才真正生效；若设了width，可能干扰比例计算 - 更稳妥写法：
flex: 1 1 25%和flex: 3 1 75%，明确基准宽度
响应式切换（移动端收起侧边栏）
Flex 天然支持响应式。用媒体查询隐藏侧边栏，并让主内容独占一行。
立即学习“前端免费学习笔记（深入）”；
- 小屏下设
flex-direction: column，让aside和main垂直堆叠 - 或直接
display: none侧边栏，主内容flex: 1自然撑满 - 配合汉堡菜单时，可加
transform: translateX(-100%)实现滑入效果，仍保持 flex 布局结构不变
注意事项与常见坑
Flex 布局简洁，但几个细节容易出问题：
-
高度继承：若想侧边栏和主内容等高，确保父容器有明确高度（如
height: 100vh），且子元素未设height: 100%（会失效） -
换行控制：默认
flex-wrap: nowrap，左右不会折行；除非主动改，否则无需担心 -
内容溢出：主内容内长文本或大图可能撑破布局，建议给
main加min-width: 0防止 flex 项目最小宽度干扰 -
IE 兼容：旧版 IE 对
flex: 1支持不一致，可降级写成flex: 1 1 0%提高兼容性
- 侧边栏（
