使用 Flexbox 可实现侧边栏与主内容区域的自适应布局，通过设置容器 display: flex，利用 flex 属性按比例分配空间，如侧边栏 flex: 1、内容区 flex: 4 实现 20% 与 80% 分布；需固定侧边栏宽度时用 flex: 0 0 200px，主内容 flex: 1 自动填充剩余空间；结合媒体查询在小屏幕下设置 flex-direction: column，使布局垂直堆叠，提升移动端可读性。
在现代网页布局中，侧边栏与主内容区域的自适应排布非常常见。使用 Flexbox 可以轻松实现侧边栏和内容区域按比例分配空间，并且自动适应容器大小。
先从 HTML 结构开始，通常包含一个容器、一个侧边栏和一个主内容区：
<div class="container"> <aside class="sidebar">侧边栏</aside> <main class="content">主内容</main> </div>
通过设置容器为 Flex 布局，可以控制子元素如何分配空间。常见的需求是侧边栏固定宽度或按比例，主内容占据剩余空间。
例如，让侧边栏占 20%，主内容占 80%：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
width: 100%;
}
<p>.sidebar {
flex: 1; /<em> 占据 1 份 </em>/
background-color: #f4f4f4;
}</p><p>.content {
flex: 4; /<em> 占据 4 份，总共 5 份，即 80% </em>/
background-color: #fff;
}</p>这里 flex: 1 和 flex: 4 表示比例关系，等同于 20% 与 80%。浏览器会自动计算并分配空间。
有时需要侧边栏保持固定宽度（如 200px），而主内容自动填充剩余空间：
.container {
display: flex;
width: 100%;
}
<p>.sidebar {
flex: 0 0 200px; /<em> 不伸展不收缩，固定 200px </em>/
background-color: #f4f4f4;
}</p><p>.content {
flex: 1; /<em> 自动填充剩余空间 </em>/
background-color: #fff;
}</p>flex: 0 0 200px 是 flex-grow: 0、flex-shrink: 0、flex-basis: 200px 的简写，确保侧边栏不被压缩或拉伸。
在小屏幕上，可切换为垂直堆叠布局：
@media (max-width: 768px) {
.container {
flex-direction: column;
}
<p>.sidebar,
.content {
flex: none;
width: auto;
}
}</p>这样在移动设备上，侧边栏和内容上下排列，提升可读性。
基本上就这些。Flexbox 让侧边栏和内容区域的比例控制变得直观又灵活，配合媒体查询还能实现良好响应式效果。关键是理解 flex 属性如何分配空间。
以上就是如何在CSS中实现侧边栏和内容自适应_使用Flexbox控制侧栏和内容比例的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
681
收藏
