css - 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：

* {
  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;
}

<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>