CSS Flexbox 布局实现网页三分：上、左、右布局代码示例

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  height: 100px;
  background-color: #ccc;
}

.left-sidebar {
  flex: 1;
  background-color: #eee;
}

.main-content {
  flex: 2;
  background-color: #fff;
}

解释：

1. 使用display: flex将容器设置为弹性布局。
2. 使用flex-direction: column将容器的主轴设置为垂直方向。
3. 使用height: 100vh将容器的高度设置为视口高度。
4. 使用flex: 1和flex: 2将左侧和右侧的宽度比例设置为1:2。
5. 使用不同的背景色来区分不同的部分。