flex布局如何实现上分一块，中分左右两块，下分一块

Flexbox布局可以很方便地实现这种多区域划分。首先，你需要将容器设置为flex布局模式，通常是通过`display: flex;`完成。然后，你可以使用弹性属性来控制各个部分的大小。

1. **上分一块**：为了分配顶部的空间，你可以设置容器的`align-items: flex-start;`，这会保证元素在交叉轴（垂直方向）上开始位置对齐。

2. **中分左右两块**：对于中间部分，如果你想要左右平均分布，可以给两个元素分别设置`flex: 1;`，这意味着它们将平均占据剩余空间。同时，使用`justify-content: space-between;`会让这两个元素均匀分布在交叉轴（水平方向）上。

3. **下分一块**：保持`align-items: flex-end;`可以让底部元素放在容器的底部。如果需要，也可以为这个区域设置特定的flex值使其占据一定比例。

下面是一个简单的例子：

<div class="container">
  <div class="top">上部分</div>
  <div class="middle">
    <div class="left">左部分</div>
    <div class="right">右部分</div>
  </div>
  <div class="bottom">下部分</div>
</div>

<style>
.container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.middle {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.left, .right {
  flex: 1;
}

.bottom {
  align-self: flex-end;
}
</style>