html - 如何像表格一样对齐 flex 元素？

Question

我有两个显示信息的 flexbox ，我希望它们的行内容像表格一样排列。

它们各占其父级的 50% 并相应地调整大小。

问题是我无法让“内容”垂直排列，因为我的标题大小不一。

这是作为表格工作的正确布局: 这是我对 flex 的看法:

我曾尝试在我的标题上设置一个最小宽度，但是当我调整浏览器大小时，内容较短的 flexbox 比另一个收缩得更多。

专门寻找 flexbox 解决方案，因为有一些响应式调整会破坏表格。

https://codesandbox.io/s/8k6qyrovjl

更新:在@seantunwin 的帮助下，问题似乎是一段内容是一个很长的字符串，例如。一个 url(更新的代码)。似乎让一切都不同步

Answer 1

将 .row 的第一个子级设置为其 flex 父级宽度的 50%，或者任何适合您的值。

为了考虑文本换行，您还可以将 .row 的第二个子项设置为 50% 或您可以接受的其他一些值。

下面的代码中还有一个注释，作为进一步美学的想法。

.row :first-child {
  flex: 0 1 50%;
}

.row :nth-child(2) {
  flex: 0 1 50%;
  /* Align to bottom of cell if you're inclined for long text in adjacent */
  align-self: flex-end;
}

示例:a fork from the example in OP