如何使两个 Flex 列表现得像 CSS 中的表格？

Question

我不相信我所要求的在纯 CSS 中仍然可以实现，但无论如何我都会问，希望有另一种方法或我缺少的东西。

这是我当前布局的示意图，使用 flexbox 实现：

这非常有效。但是，如果我在“列中的列”div 下方的第 1 列中添加更多内容会怎样。然后我还想将内容添加到第 2 列，但我希望它与我刚刚添加到第 1 列的项目占用相同的垂直空间？换句话说，就好像所有东西都是一个表格，而那些在相邻表格单元格中的同一行中的项目？

这是布局表单时的常见问题，例如，您希望将项目（城市、州、邮编）分组到列中，并且您希望并排跟踪表单中的内容。

（我刚刚在列周围设置了灰色边框来帮助描绘标记，但通常它们不会是多列表单布局中列之间的边框）

因此，最终结果将如下图所示：

这是演示的结构 HTML：

.container {
  display: flex;
}

.column {
  flex-grow: 1;
  /* fill parent space based on child content */
  flex: 1 1 0;
  /* fill parent space equally regardless of child content*/
}

.column.row {
  display: flex;
  flex-wrap: wrap;
}

.column.row div {
  flex-grow: 1;
}

.column.row h2 {
  width: 100%;
}

<div class="container">
  <div class="column">
    <h1>Column 1 Layout Goes here</h1>
    <div>Form Field</div>
    <div>Form Field</div>
    <div>Form Field</div>
    <div class="column row">
      <h2>Column within column</h2>
      <div>Form Field</div>
      <div>Form Field</div>
      <div>Form Field</div>
    </div>
    <div>Form Field "Y" Added</div>
  </div>
  <div class="column">
    <h1>Column 2 layout goes here</h1>
    <div>Form Field</div>
    <div>Form Field</div>
    <div>Form Field</div>
    <div>Form Field Should Track with Form Field "Y" but How?</div>
  </div>
</div>

Answer 1

您可以使具有flex-direction: column; 的.column 元素灵活容器（即将display: flex 也应用于.column 元素）并将margin-top: auto; 应用于第二列的最后一个div 移动它到容器的底部：

.container {
  display: flex;
}

.column {
  flex-grow: 1; /* fill parent space based on child content */
  flex: 1 1 0; /* fill parent space equally regardless of child content*/
  display: flex;
  flex-direction: column;
}

.column.row {
  display: flex;
  flex-wrap: wrap;
}

.column.row div {
  flex-grow: 1;
}

.column.row h2 {
  width: 100%;
}
.column > div:last-child {
margin-top: auto;
}

<div class="container">
<div class="column">
  <h1>Column 1 Layout Goes here</h1>
  <div>Form Field</div>
  <div>Form Field</div>
  <div>Form Field</div>
  <div class="column row">
    <h2>Column within column</h2>
    <div>Form Field</div>
    <div>Form Field</div>
    <div>Form Field</div>
  </div>
  <div>Form Field "Y" Added</div>
</div>
<div class="column">
  <h1>Column 2 layout goes here</h1>
  <div>Form Field</div>
  <div>Form Field</div>
  <div>Form Field</div>
  <div>Form Field Should Track with Form Field "Y" but How?</div>
</div>