通过拖动使flexbox侧边栏div宽度增加/减少

Question

我有一个简单的3列布局，左侧边栏，内容区域和右侧边栏。我使用flexbox来处理宽度。我想这样做，当用户拖动左侧边栏的右边框时，div可以调整大小。我更喜欢css解决方案，如果它有意义，但我对javascript或jquery开放。无论哪种方法最容易让我理解：）

Answer 1

以下是使用css resize属性的可能解决方案（点击Run code snippet查看结果）。

注意：

• 调整大小处理程序位于左侧边栏的右下角
• 所有浏览器尚未完全支持resize属性（约74％见caniuse）
• 调整大小处理程序的样式仍然有限（请参阅此question）

.container {
  height: 500px;
  display: flex;
}

.left-sidebar {
  display: flex;
  flex-direction: row;
  background-color: #364F6B;
  color: #fff;
  
  /* This is for resizing */
  overflow: scroll;
  resize: horizontal;
}

.center-aria {
  background-color: #3FC1C9;
  flex-grow: 2;
}

.right-sidebar {
  background-color: #FC5185;
}

.left-sidebar, .right-sidebar, .center-aria {
  padding: 8px;
}

<div class="container">
  <div class="left-sidebar">
    Left Sidebar - Resize me
  </div>
  
  <div class="center-aria">Center Aria</div>
  
  <div class="right-sidebar">Right Sidebar</div>
</div>