flex弹性布局上中下

在Flex弹性布局中，可以通过以下方式实现上中下的排列：

1. 使用flex容器：将要显示的内容包裹在一个具有flex属性的父容器中。设置父容器的display为flex，这样子元素就可以按照弹性布局进行排列。

2. 上中下排列方式：使用flex-direction属性来定义子元素的排列方向。要实现上中下的排列，可以将flex-direction设置为column。

3. 上部元素：为上部元素设置相应的flex属性，可以通过设置flex-grow、flex-shrink和flex-basis来控制元素的伸缩性。比如设置flex: 1，表示该元素会根据可用空间进行扩展或收缩。

4. 中部元素：为中部元素设置相应的flex属性，也可以使用align-self属性来控制元素在交叉轴上的对齐方式。比如设置align-self: center，表示元素在交叉轴上居中对齐。

5. 下部元素：同样地，为下部元素设置相应的flex属性，并根据需求调整伸缩性和对齐方式。

以下是一个示例代码：

<div class="flex-container">
  <div class="item">上部</div>
  <div class="item">中部</div>
  <div class="item">下部</div>
</div>

.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置父容器的高度，以便撑开页面 */
}

.item {
  flex: 1; /* 上部和下部元素会平分剩余的空间 */
  display: flex;
  align-items: center;
  justify-content: center;
}

通过以上方式，你可以实现一个基本的上中下排列的Flex弹性布局。根据实际需求可以进一步调整样式和布局。