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

您需要为标题定义不同的弹性框，为内容定义不同的弹性框。这样，您可以为标题指定justify-content: space-around;，为内容指定justify-content: flex-start;。

请参阅此笔http://codepen.io/anon/pen/VLjrRP

Answer 2

我看到的唯一方法是在语义上将标题分开，并从flex-flow: column切换到flex-flow: row：

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

main {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}

header, article {
  flex: 0 0 calc(33% - 2rem);
  margin: 1rem;
}

header {
  background-color: lightblue;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

article {
  background-color: red;
}

＆＃13;

<main>
  <header>
    <h1>A flex child</h1>
  </header>
  <header>
    <h1>A flex child with wrapping text, and therefore taller</h1>
  </header>
  <header>
    <h1>Another flex child</h1>
  </header>
  <article>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </article>
  <article>
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </article>
  <article>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ul>
  </article>
</main>

＆＃13;

＆＃13;

＆＃13;