使用flexbox将列调整为最长单元格，就像网格一样

Question

我有一个表格的以下行，我正在尝试使用flexbox构建没有表格元素或css网格的表格，并且首先能够解决具有大量文本的单元格不换行的问题，奇怪的是，这涉及到禁用flex的增长和收缩，尽管单元格需要增长或收缩以容纳内容。但在这样做的过程中，我遇到了这样的问题:当我希望列的单元格大小调整到它所属列的最长单元格时，单元格的大小会调整到适合内容的大小。我的代码如下：

​

.row {
  display: flex;
}

.row > div {
  border: solid;
  flex: 0 0 auto;
}

<div class="box">
  <div class="row">
    <div>
      joe smith
    </div>
    <div>
      100 Broadway st. New York City, New York
    </div>
    <div>
      100 Broadway st. New York City, New York
    </div>
  </div>
  <div class="row">
    <div>
      100 Broadway st. New York City, New York 100 Broadway st. New York City, New York
    </div>
    <div>
      joe smith
    </div>
    <div>
      100 Broadway st. New York City, New York
    </div>
  </div>
</div>

​

可以在这里找到一个可查看的示例：https://jsfiddle.net/pefm968u/3

Answer 1

问题是你假设一个行方向的flex容器有列。两个不同的flex容器的项目之间的关联性甚至更小，就像你的布局一样。

如果您需要列的外观，则在项上设置固定宽度。否则，tables和Grid是最好的选择。

Answer 2

听起来你想要使用内联块样式的元素，而不是flexbox：

.row {
  display: inline-block;
}

.row > div {
  border: solid;
}

或者，您可以保留flexbox，但您将丢失列：

* {
  display: inline-block;
}

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

.row > div {
  border: solid;
}