css - 如何使两个 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

您可以使 .column 元素成为 flex 容器(即将 display: flex 也应用于 .column 元素)具有 flex-direction: 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>