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>