如何用css flex实现可伸缩侧边栏

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《如何用css flex实现可伸缩侧边栏》，涉及到，有需要的可以收藏一下

使用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 布局，让子元素横向排列。

CSS 样式设置

关键在于合理设置 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>

说明：

• flex: 0 0 240px 表示侧边栏不会随容器变化而伸缩，保持固定宽度。
• flex: 1 让主内容区域自动填充剩下的空间。

实现可伸缩效果

若希望侧边栏可以拖动调整宽度，需结合 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 就能实现交互式伸缩。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。