flex布局五个div上下左右中分布

Flex布局是一种用于网页布局的弹性盒子模型，可以实现灵活的元素排列和对齐。下面是一种实现五个div上下左右中分布的方法：

1. 创建一个父容器，并将其设置为flex布局：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 在父容器中添加五个子元素（div）：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

3. 设置子元素的样式，使其上下左右中分布：

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

通过以上步骤，可以实现五个div在父容器中上下左右中分布的效果。