使用CSS Flex布局实现可伸缩侧边栏，通过flex属性控制空间分配；2. 侧边栏设flex: 0 0 240px保持固定宽度，主内容区用flex: 1自动填充剩余空间；3. 添加collapsed类切换侧边栏宽度，结合JavaScript实现点击展开/收起；4. 配合媒体查询在小屏下默认收缩，实现响应式适配。
实现一个可伸缩的侧边栏，使用 CSS Flex 是一种简洁高效的方式。核心思路是利用 flex 属性让侧边栏和主内容区在容器中按需分配空间，同时支持固定宽度和弹性伸缩。
先定义页面的基本 HTML 结构：
<div class="container"> <aside class="sidebar">侧边栏</aside> <main class="main-content">主内容</main> </div>
容器使用 flex 布局，让子元素横向排列。
关键在于合理设置 flex 属性，控制侧边栏是否伸缩以及主内容如何响应。
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
height: 100vh; /* 占满视口高度 */
}
<p>.sidebar {
width: 240px; /<em> 默认宽度 </em>/
flex: 0 0 240px; /<em> 不增长、不缩小、基础宽度240px </em>/
background-color: #333;
color: white;
padding: 20px;
}</p><p>.main-content {
flex: 1; /<em> 占据剩余所有空间 </em>/
background-color: #f4f4f4;
padding: 20px;
}</p>说明：
若希望侧边栏可以拖动调整宽度，需结合 JavaScript 监听鼠标事件。但仅用 CSS 可实现“点击切换宽窄”模式。
例如，添加一个收缩状态类：
.sidebar.collapsed {
flex: 0 0 60px;
width: 60px;
}
通过 JS 切换 collapsed 类来实现展开/收起：
document.querySelector('.toggle-btn').addEventListener('click', () => {
document.querySelector('.sidebar').classList.toggle('collapsed');
});
此时侧边栏在 240px 和 60px 之间切换，主内容自动适应剩余空间。
在小屏幕上可默认收起侧边栏：
@media (max-width: 768px) {
.sidebar {
flex: 0 0 60px;
}
}
也可以配合媒体查询或汉堡菜单实现移动适配。
基本上就这些。用 flex 实现可伸缩侧边栏，关键是理解 flex 的三个值含义，并让主内容区用 flex: 1 吸收多余空间。搭配简单 JS 就能实现交互式伸缩。
以上就是如何用css flex实现可伸缩侧边栏的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
137
收藏
