用css flex三行二列布局

使用CSS的Flexbox布局可以很容易地创建三行二列的布局。Flexbox布局提供了一种更高效的方式来对齐和分布容器内项目之间的空间，即使它们的大小未知或是动态变化的。以下是创建三行二列布局的基本步骤：

1. 设置外层容器为Flex布局：

.container {
  display: flex;
  flex-direction: column; /* 使子元素在垂直方向上排列 */
}

2. 设置内层容器为两列：

.row {
  display: flex;
  flex: 1; /* 让每个子容器占据等量的空间 */
}

3. 设置列内的项目高度或宽度（根据列或行的方向）：

.row-item {
  flex-basis: 50%; /* 设置每个项目的基准宽度为容器宽度的50% */
}

4. HTML结构如下：

<div class="container">
  <div class="row">
    <div class="row-item">内容1</div>
    <div class="row-item">内容2</div>
  </div>
  <div class="row">
    <div class="row-item">内容3</div>
    <div class="row-item">内容4</div>
  </div>
  <div class="row">
    <div class="row-item">内容5</div>
    <div class="row-item">内容6</div>
  </div>
</div>

这样，`.container` 容器包含三个 `.row` 子容器，每个 `.row` 子容器包含两个 `.row-item`，从而形成一个三行二列的布局。