Html Flexbox导航栏，将链接拉伸为等高

我有一个导航栏，它有一些链接，当视口有点窄时，这些链接会环绕到2+行上。我想使所有导航项目的高度相同，并保持其文本垂直居中。到目前为止，我已经能够垂直居中的一切，但我有麻烦获得高度的

.container{
宽度：950px；
保证金：0自动；
}
保险商实验室{
显示器：flex；
对齐项目：拉伸；
调整内容：灵活启动；
}
李{
列表样式类型：无；
显示器：flex；
柔性生长：1；
对齐项目：居中；
弯曲方向：立柱；
文本对齐：居中；
边框：1px实心#fff；
文本对齐：居中；
}
a{
颜色：#fff；
填充：10px；
右边距：1px；
弹性：1；
显示器：flex；
对齐内容：居中对齐；
对齐项目：居中；
文本对齐：居中；
背景色：#000；
}

如何使链接拉伸到相等的高度，并使文本在中心垂直对齐











每个列表项（
li
）已经是一个flex容器，但请尝试将方向更改为
列

然后给锚定一个
flex:1
，这样它们就占据了所有可用空间

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

要保持文本水平和垂直居中，请将
text align:center
添加到
li
中，并使锚固件成为柔性容器，同时添加
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 */
}

李家的高度都一样，问题在于李家内部的锚定标签

对这些应用一些flex样式，它会解决您的问题


.container{
宽度：300px；
保证金：0自动；
}
保险商实验室{
显示器：flex；
调整内容：灵活启动；
}
李{
列表样式类型：无；
显示器：flex；
对齐项目：拉伸；
柔性生长：1；
}
a{
显示器：flex；
对齐项目：居中；
背景色：#000；
颜色：#fff；
填充：10px；
对齐内容：居中对齐；
右边距：1px；
}

如何使链接拉伸到相等的高度，并使文本在中心垂直对齐











我用这个代码“解决了”。。但最好等待更好的答复

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

如果这就是你要找的，我会加上它作为回答试试这个-轰！就在那里。非常感谢你的帮助！考虑为这个代码应该如何工作提供一个解释。