flex进行俩行俩列布局

Flex布局是一种弹性布局方案，可以方便地实现各种页面布局。在进行两行两列布局时，可以使用Flex布局来实现。下面是一个使用Flex布局实现的两行两列布局的示例代码：

<div class="main">
  <div class="col1"></div>
  <div class="col2"></div>
  <div class="col3"></div>
  <div class="col4"></div>
</div>

<style>
  .main {
    display: flex;
    flex-wrap: wrap;
    height: 100vh;
  }
  .col1, .col2, .col3, .col4 {
    flex-basis: 50%;
    height: 50vh;
  }
  .col1 {
    background-color: red;
  }
  .col2 {
    background-color: green;
  }
  .col3 {
    background-color: blue;
  }
  .col4 {
    background-color: yellow;
  }
</style>

在上面的代码中，我们使用了`display: flex`来将`.main`元素设置为Flex容器，然后使用`flex-wrap: wrap`来实现换行。接着，我们将每个列元素的`flex-basis`设置为50%，这样就可以让它们平分一行的宽度。最后，我们将每个列元素的高度设置为50vh，这样就可以让它们平分整个页面的高度。