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

使用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 可实现“点击切换宽窄”模式。

例如，添加一个收缩状态类：

.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 就能实现交互式伸缩。