css - 最长元素的嵌套 Flexbox 行宽度

Question

我正在尝试使用 flexbox 复制表的行为，以获得更好的可预测性和控制。 Here's a codepen of what I have currently.

这是 SCSS:

.flex-table
  display: flex
  flex-direction: column
  flex-wrap: nowrap

.flex-table-row
  display: flex
  flex-direction: row
  flex-wrap: nowrap

.flex-table-item
  flex-basis: 0
  flex-grow: 1

.flex-table-item > :nth-child(3n + 3)
  border: 1px solid red
  flex-grow: 0
  white-space: nowrap

我的问题是，如何让列中每个元素的宽度占据其内容的宽度或列中最大元素的宽度，以较大者为准？

这是我所拥有的图像:

我希望 Header 3 的框与其他两个元素的宽度相等。此外，如果 Content 2-2 或 Content 3-2 增长，我希望所有列都扩展到最大列的宽度相等，类似于表格。我知道我可以使用 min-width 部分地做到这一点，但我想要一种适用于任何宽度的动态内容的方法。

Answer 1

归根结底，要做到这一点(使用 flexboxes)，标题和下面的内容将需要分组在列中，而不是像现在那样所有标题都在同一行中。我相信我提到的方式无论如何都更有意义，但也许您需要一些不同的东西。

这是一个JSFiddle我所描述的。如您所见，在每一列中，每个元素都将动态调整大小以适应该列中最大元素的宽度。此外， flex-basis: 0 确保每列的大小调整为与最大列相同的宽度。如果调整一列的宽度，它们都会调整。

实际上我所做的只是从行切换到列:

.flex-table-column {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

如果您对此有任何疑问，或者我是否错过了标记，请告诉我。