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

在 Flex 布局中，要实现上中一块，下分左右两块这样的布局，你可以使用容器的 `display: flex;` 属性，并结合 `flex-direction: column;` (垂直布局) 和一些弹性盒子特性的控制。以下是具体的步骤：

1. 设置容器样式：

   .container {
     display: flex;
     flex-direction: column;
   }

2. 对于上中部分（一块），你可以将它们放在一起，并可能分配大部分的空间：

   .container > .upper-middle {
     flex: 1; /* 自适应高度 */
     order: 1; /* 如果需要调整顺序，可以设置order */
   }

3. 对于下部分（分为左右两块），可以将它们放在容器的底部：

   .container > .bottom {
     display: flex;
     justify-content: space-between; /* 左右均匀分布 */
   }

   .bottom > .left,
   .bottom > .right {
     flex: 1; /* 同等大小，如果需要不同比例，可以用 flex-basis 或者 width */
   }

4. 为了明确显示分割线或其他效果，可以在 `.bottom` 中添加分割线或者背景色。

完整的例子可能如下：

<div class="container">
  <div class="upper-middle">上中部分</div>
  <div class="bottom">
    <div class="left">左块</div>
    <div class="right">右块</div>
  </div>
</div>

通过这样的设置，上半部分占据大部分空间，下半部分水平居中并分成左右两个相等的部分。