使用CSS Flex布局实现可伸缩侧边栏，通过flex属性控制空间分配；2. 侧边栏设flex: 0 0 240px保持固定宽度，主内容区用flex: 1自动填充剩余空间；3. 添加collapsed类切换侧边栏宽度，结合JavaScript实现点击展开/收起；4. 配合媒体查询在小屏下默认收缩，实现响应式适配。
实现一个可伸缩的侧边栏，使用 CSS Flex 是一种简洁高效的方式。核心思路是利用 flex 属性让侧边栏和主内容区在容器中按需分配空间，同时支持固定宽度和弹性伸缩。
基本结构布局
先定义页面的基本 HTML 结构：
主内容
容器使用 flex 布局，让子元素横向排列。
CSS 样式设置
关键在于合理设置 flex 属性，控制侧边栏是否伸缩以及主内容如何响应。
立即学习“前端免费学习笔记（深入）”；
.container { display: flex; height: 100vh; /* 占满视口高度 */}.sidebar {width: 240px; / 默认宽度 /flex: 0 0 240px; / 不增长、不缩小、基础宽度240px /background-color: #333;color: white;padding: 20px;}
.main-content {flex: 1; / 占据剩余所有空间 /background-color: #f4f4f4;padding: 20px;}
说明：
flex: 0 0 240px 表示侧边栏不会随容器变化而伸缩，保持固定宽度。flex: 1 让主内容区域自动填充剩下的空间。
实现可伸缩效果
若希望侧边栏可以拖动调整宽度，需结合 JavaScript 监听鼠标事件。但仅用 CSS 可实现“点击切换宽窄”模式。
稿定抠图
AI自动消除图片背景
76 查看详情
例如，添加一个收缩状态类：
.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实现可伸缩侧边栏的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1019925.html
微信扫一扫 
支付宝扫一扫 
