使用 Flexbox 可实现侧边栏与主内容区域的自适应布局，通过设置容器 display: flex，利用 flex 属性按比例分配空间，如侧边栏 flex: 1、内容区 flex: 4 实现 20% 与 80% 分布；需固定侧边栏宽度时用 flex: 0 0 200px，主内容 flex: 1 自动填充剩余空间；结合媒体查询在小屏幕下设置 flex-direction: column，使布局垂直堆叠，提升移动端可读性。
在现代网页布局中，侧边栏与主内容区域的自适应排布非常常见。使用 Flexbox 可以轻松实现侧边栏和内容区域按比例分配空间，并且自动适应容器大小。
基本结构
先从 HTML 结构开始，通常包含一个容器、一个侧边栏和一个主内容区：
主内容
使用 Flexbox 设置比例布局
通过设置容器为 Flex 布局，可以控制子元素如何分配空间。常见的需求是侧边栏固定宽度或按比例，主内容占据剩余空间。
例如，让侧边栏占 20%，主内容占 80%：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
width: 100%;
}
.sidebar {
flex: 1; / 占据 1 份 /
background-color: #f4f4f4;
}
.content {
flex: 4; / 占据 4 份，总共 5 份，即 80% /
background-color: #fff;
}
这里 flex: 1 和 flex: 4 表示比例关系，等同于 20% 与 80%。浏览器会自动计算并分配空间。
固定侧边栏 + 自适应内容
有时需要侧边栏保持固定宽度（如 200px），而主内容自动填充剩余空间：
.container {
display: flex;
width: 100%;
}
.sidebar {
flex: 0 0 200px; / 不伸展不收缩，固定 200px /
background-color: #f4f4f4;
}
.content {
flex: 1; / 自动填充剩余空间 /
background-color: #fff;
}
flex: 0 0 200px 是 flex-grow: 0、flex-shrink: 0、flex-basis: 200px 的简写，确保侧边栏不被压缩或拉伸。
响应式调整
在小屏幕上，可切换为垂直堆叠布局：
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar,
.content {
flex: none;
width: auto;
}
}
这样在移动设备上，侧边栏和内容上下排列，提升可读性。
基本上就这些。Flexbox 让侧边栏和内容区域的比例控制变得直观又灵活，配合媒体查询还能实现良好响应式效果。关键是理解 flex 属性如何分配空间。
