html - Flexbox 等高元素，具有动态高度，无需指定高度或比例

Question

我不确定 Flexbox 是否可以做到这一点，但它似乎越来越接近了: http://codepen.io/timkelty/pen/XbKzaQ

.Nav {
  display: flex;
  max-width: 700px;
  background: whitesmoke;
}

.Nav-column {
  width: 33%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}

.Nav-hdg {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  flex: 1;
}

.Nav-content {
  background: red;
  flex: 1;
}

基本上，我试图让 .Nav-hdg 元素具有相同的高度，并在列中垂直居中。我不想指定高度，但是，我希望高度是最高的 .Nav-hdg 的高度。

有谁知道如何解决这个问题，或者 flexbox 是否可以做到这一点？

这是我要实现的目标的粗略模型:

Answer 1

您需要为标题定义不同的 flexbox ，为内容定义不同的 flexbox 。通过这种方式，您可以为标题指定 justify-content: space-around; 并为内容指定 justify-content: flex-start;。

看这支笔 http://codepen.io/anon/pen/VLjrRP