两个同级的弹性盒子 实现表格布局

可以使用flex布局来实现表格布局，具体实现方法如下：

HTML结构：

<div class="table">
  <div class="row header">
    <div class="cell">表头1</div>
    <div class="cell">表头2</div>
    <div class="cell">表头3</div>
  </div>
  <div class="row">
    <div class="cell">内容1</div>
    <div class="cell">内容2</div>
    <div class="cell">内容3</div>
  </div>
  <div class="row">
    <div class="cell">内容4</div>
    <div class="cell">内容5</div>
    <div class="cell">内容6</div>
  </div>
</div>

CSS样式：

.table {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
}

.row {
  display: flex;
  flex-direction: row;
  border: 1px solid #ccc;
}

.header {
  font-weight: bold;
  background-color: #f0f0f0;
}

.cell {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
}

解释：

首先用一个大的容器来包含整个表格，设置为flex布局，并且flex-direction为column，这样子元素就会竖直排列。

每一行使用一个div容器来包含，也设置为flex布局，但是flex-direction为row，这样子元素就会水平排列。

表头使用一个特殊的类名.header来标识，以便于增加样式。

单元格使用一个div容器来包含，设置为flex: 1，表示等分剩余空间，padding: 10px，增加内边距，border: 1px solid #ccc，增加边框。

这样子就可以实现简单的表格布局了，通过调整样式可以实现更多的效果。