Flexbox導航欄，拉伸鏈接是相等的高度

Question

我有一個導航欄有一些鏈接，當視口有些狹窄時，它們會纏繞到2+行上。我想將所有導航項目設置爲相同的高度並保持文本垂直居中。到目前爲止，我已經能夠垂直居中所有事物，但我無法獲得所有匹配的<a>'s的高度。請參考下面codepen例如...

http://codepen.io/anon/pen/GovmZa

.container { 
 
    width:950px; 
 
    margin:0 auto; 
 
} 
 

 
ul { 
 
    display:flex; 
 
    align-items: stretch; 
 
    justify-content: flex-start; 
 
} 
 

 
li { 
 
    list-style-type:none; 
 
    display:flex; 
 
    flex-grow:1; 
 
    align-items:center; 
 
    flex-direction: column; 
 
    text-align:center; 
 
    border:1px solid #fff; 
 
    text-align:center; 
 
} 
 

 
a { 
 

 
    color:#fff; 
 
    padding:10px; 
 
    margin-right:1px; 
 
    flex: 1; 
 
    display: flex; 
 
    align-content: center; 
 
    align-items: center; 
 
    text-align:center; 
 
    background-color:#000; 
 
}

<div class="container"> 
 
    <p>How do I make the links stretch to be equal heights and keep text vertically aligned in the center?</p> 
 
    <ul> 
 
    <li> 
 
     <a href="#">Can</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">somebody please help me figure</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">this</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">out</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

每個列表項（li）已經是一個柔性的容器，而是試圖改變方向，以column。

然後給主播一個flex: 1，所以他們佔用所有可用的空間。

li { flex-direction: column; } 
a { flex: 1; } 

爲了使文本水平，垂直居中，添加text-align: center到li，使錨Flex容器，以及，在添加的屬性align-*。

li { 
    flex-direction: column; 
    text-align: center; 
} 

a { 
    flex: 1; 
    display: flex; 
    align-content: center; /* will vertically center multi-line text */ 
    align-items: center; /* will vertically center single-line text */ 
} 

Revised Codepen

Answer 2

李的都是相同的高度，這是中李的是這個問題的錨標記。

應用一些彎曲的造型這些，它會解決您的問題

.container { 
 
    width:300px; 
 
    margin:0 auto; 
 
} 
 

 
ul { 
 
    display:flex; 
 
    justify-content: flex-start; 
 
} 
 

 
li { 
 
    list-style-type:none; 
 
    display:flex; 
 
    align-items: stretch; 
 
    flex-grow:1; 
 
} 
 

 
a { 
 
    display:flex; 
 
    align-items: center; 
 
    background-color:#000; 
 
    color:#fff; 
 
    padding:10px; 
 
    align-content: center; 
 
    margin-right:1px; 
 
}

<div class="container"> 
 
    <p>How do I make the links stretch to be equal heights and keep text vertically aligned in the center?</p> 
 
<ul> 
 
    <li> 
 
    <a href="#">Can</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">somebody please help me figure</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">this</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">out</a> 
 
    </li> 
 
</ul> 
 
</div>

Answer 3

我「解決」這個代碼..不過還好等待一個更好的答覆..

.container { 
    width:600px; 
    height:100px; 
    margin:0 auto; 
} 

ul { 
    display:flex; 
    align-items: stretch; 
    justify-content: flex-start; 
    width:100%; 
} 

li { 
    list-style-type:none; 
    display:flex; 
    flex-grow:1; 
    align-items:center; 
} 

a { 
    background-color:#000; 
    color:#fff; 
    padding:10px; 
    align-content: center; 
    margin-right:1px; 
    height:25px; 
    width:100%; 
}