html - 如何像表格一样对齐弹性项目？

Question

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

他们每个人都占他们父母的 50% 并相应地调整大小。

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

这是作为表格工作的正确布局： 这是我使用 flex 所拥有的：

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

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

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

更新：在@seantunwin 的帮助下，看起来问题是一段内容是一个很长的字符串，例如。一个网址（更新的代码）。它似乎使一切不同步

标签： htmlcssflexbox

Answer 1

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

为了考虑文本换行，您还可以将.row's second child 设置为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;
}

示例：来自 OP 中示例的 fork