如何通过拖拽调整Flexbox左侧侧边栏Div的宽度？

嘿，这个需求我之前也碰到过，刚好有两种超易懂的方案，优先给你推荐纯CSS的（毕竟不用写JS更省心），要是需要自定义拖拽效果再用JS版本，完全适配你的Flex三栏布局需求～

这个方案完全不需要JavaScript，靠CSS自带的resize属性就能实现，简洁到离谱，还完美契合Flex布局的特性：

<div class="container">
  <div class="left-sidebar">左侧侧边栏</div>
  <div class="content-area">内容区域</div>
  <div class="right-sidebar">右侧侧边栏</div>
</div>

.container {
  display: flex;
  height: 100vh; /* 占满整个视口高度，你可以根据自己的需求调整 */
}

.left-sidebar {
  resize: horizontal; /* 允许水平拖拽调整宽度 */
  overflow: auto; /* 这个是resize生效的必要条件，哪怕内容不会溢出也得加 */
  min-width: 200px; /* 限制最小宽度，防止用户把侧边栏拖得太窄 */
  max-width: 500px; /* 限制最大宽度，按需设置就行 */
  background: #f0f0f0;
  padding: 1rem;
}

.content-area {
  flex: 1; /* 自动占满剩余空间，Flex布局的核心特性之一 */
  padding: 1rem;
  background: #fff;
}

.right-sidebar {
  width: 250px; /* 固定右侧宽度，也可以写成flex: 0 0 250px，效果一样 */
  background: #f0f0f0;
  padding: 1rem;
}

为啥这么写？ #

• resize: horizontal直接给左侧栏开了水平拖拽权限，浏览器会自动处理拖拽逻辑
• overflow: auto是resize的必填项，浏览器要求元素有非visible的overflow才能触发resize
• min-width和max-width是为了提升体验，避免用户把侧边栏拖得太窄或者太宽，完全可以根据你的需求改数值
• 中间内容区用flex:1就会自动填充左侧栏调整后剩下的空间，右侧栏固定宽度，完美适配三栏布局

如果你需要更定制化的效果（比如加个专门的拖拽手柄，或者拖拽时的特殊动画），或者要兼容一些特别老的浏览器（不过现在主流浏览器都支持CSS resize了），可以用原生JS实现，逻辑超清晰，不用依赖jQuery：

<div class="container">
  <div class="left-sidebar">
    左侧侧边栏
    <div class="drag-handle"></div> <!-- 专门的拖拽手柄，用户一看就知道这能拖 -->
  </div>
  <div class="content-area">内容区域</div>
  <div class="right-sidebar">右侧侧边栏</div>
</div>

.container {
  display: flex;
  height: 100vh;
}

.left-sidebar {
  position: relative;
  min-width: 200px;
  max-width: 500px;
  background: #f0f0f0;
  padding: 1rem;
}

.drag-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  background: #ccc;
  cursor: col-resize; /* 鼠标移上去变成左右箭头，提示用户可以拖拽 */
}

.content-area {
  flex: 1;
  padding: 1rem;
  background: #fff;
}

.right-sidebar {
  width: 250px;
  background: #f0f0f0;
  padding: 1rem;
}

const dragHandle = document.querySelector('.drag-handle');
const leftSidebar = dragHandle.parentElement;
let startX, startWidth;

// 鼠标按下时记录初始位置和宽度
dragHandle.addEventListener('mousedown', (e) => {
  startX = e.clientX;
  startWidth = parseInt(window.getComputedStyle(leftSidebar).width);
  // 开始监听鼠标移动和松开事件
  document.addEventListener('mousemove', onDrag);
  document.addEventListener('mouseup', stopDrag);
  e.preventDefault(); // 防止拖拽时选中文字之类的默认行为
});

// 鼠标移动时计算新宽度
function onDrag(e) {
  const widthChange = e.clientX - startX;
  const newWidth = startWidth + widthChange;
  // 从CSS里获取设置的最小/最大宽度，限制拖拽范围
  const minWidth = parseInt(window.getComputedStyle(leftSidebar).minWidth);
  const maxWidth = parseInt(window.getComputedStyle(leftSidebar).maxWidth);
  if (newWidth >= minWidth && newWidth <= maxWidth) {
    leftSidebar.style.width = `${newWidth}px`;
  }
}

// 鼠标松开时停止监听
function stopDrag() {
  document.removeEventListener('mousemove', onDrag);
  document.removeEventListener('mouseup', stopDrag);
}

这个方案的优势 #

• 有专门的拖拽手柄，用户体验更明确，不会误触
• 可以轻松扩展拖拽时的效果（比如加个半透明遮罩、动画之类的）
• 逻辑简单，每一步都很清晰，新手也能看懂

选择建议 #

如果不需要自定义拖拽区域，纯CSS方案绝对是最优解，代码少、无依赖、维护简单；要是需要更精细的控制，就用JS方案，自由度更高～

内容的提问来源于stack exchange，提问作者user172586