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%; 
}