用flex布局使四个div成两行两列

好的，下面是使用flex布局实现四个div成两行两列的代码：

HTML代码：

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

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

这个布局将四个div放在一个父容器中，使用flex布局让子元素自动排列成两行两列，其中`flex-wrap: wrap`属性使元素自动换行，`justify-content: space-between`属性使元素在主轴上等间距分布，`align-items: center`属性使元素在交叉轴上居中对齐。