Html 文本对齐：居中；忽略显示：flex元素？

对于以下内容，锚文本未居中。如果我将锚点的显示从flex更改为block，则文本将居中。为什么会这样

到目前为止，我只测试了铬

<ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>



*, *:before, *:after {
  -moz-box-sizing: border-box; 
  -webkit- box-sizing: border-box;   box-sizing: border-box;
 }

ul {
  display: flex;
  flex-flow: row wrap;
  padding: 0;
  width: 40%;
  margin: auto;
  border: 1px solid gold;
}
li {
  list-style-type: none;
}
a {
  background: grey;
  width: 200px;
  border: 1px solid red;
  text-align: center;
  display: flex;
}

*，*：之前，*：之后{
-moz框大小：边框框；
-webkit-框大小：边框框；框大小：边框框；
}
保险商实验室{
显示器：flex；
柔性流：行换行；
填充：0；
宽度：40%；
保证金：自动；
边框：1件纯金；
}
李{
列表样式类型：无；
}
a{
背景：灰色；
宽度：200px；
边框：1px纯红；
文本对齐：居中；
显示器：flex；
}

注意：在你继续阅读我的答案之前，我希望你 通知我没有使用任何专有前缀，如果 不适用于您，是时候更新您的浏览器或尝试添加 输入前缀，如

-moz

或

-webkit

，然后查看它是否适合您

正确的方法是使用

display:flex用于
ul
元素和
li
元素上的
flex-grow

ul {
  display: flex;
  padding: 0;
  width: 40%;
  margin: auto;
  border: 1px solid gold;
}

li {
  list-style-type: none;
  flex-grow: 1;
}


您正在
a
标签上使用固定宽度，即
宽度：200px
这就扼杀了flex布局的想法，所以去掉它，用我提供的CSS修改你的CSS

在这里，我使用了
flex grow
，其值为
1
，这样每个
li
元素共享相等的
width


如果希望在单元格超过容器宽度时对其进行包装，则需要在
ul
元素上使用以下属性，如

ul {
  display: flex;
  padding: 0;
  width: 40%;
  margin: auto;
  border: 1px solid gold;
  flex-direction: row;
  flex-flow: row wrap;
}

（调整窗口大小以查看效果）


示例1，包裹的元素将拉伸到全宽



样本2，元素进一步均匀包裹

还要注意，am使用
最小宽度：100px打开
li
元素，以在演示中强制换行


正如您所评论的，您希望每行有三个li，而不是使用
flex-grow:1你需要使用
flex:133%类似

li {
  list-style-type: none;
  flex-grow: 1;
  min-width: 100px;
  flex: 1 1 33.33%;
}



样本3，每行的li数相等


示例4，即使调整大小，每行上的li数也相等

在进一步调整大小时，它们将自动调整为两行和一行。
有没有办法将li的包裹到两行上。因此，有效地使每一个都比代码中的大小大一倍？感谢您的更新，使您的答案更加完美！然而，我实际上想问的是，你是否可以让前3个lis在一行，下3个下降到下一行。并将其保持为全宽。Thanks@jdln那么为什么不使用浮动呢？我应该提供一个演示吗？或显示：表格在支持方面会更好，如果这是您的要求，不应该使用flex锚文本长度不同，但我需要每个链接的高度相同。网站是响应性的，链接文本是动态的，因此我无法设置px高度。我使用flex布局的原因之一是显示表可以使链接具有相同的高度，但不能将它们包装成两行。