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)已经是一个flex容器,但尝试将方向更改为column.

然后给锚a 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 */
}

修改了Codepen