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

Question

对于以下锚文本不居中。如果我将锚点的显示从 flex 更改为块，则文本居中。为什么是这样？

到目前为止，我只在 Chrome 上测试过。

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

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

Answer 1

注意：在您继续阅读我的答案之前，我希望您通知一下，我没有使用任何专有前缀，如果它不适合您，那么是时候更新您的浏览器了，或者尝试添加类似或的-moz前缀-webkit看看它是否适合你。

正确的方法是使用display: flex;forul元素和flex-growonli元素......

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

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

Demo

a您在标签 ie上使用固定宽度width: 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;
}

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

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

示例 2，元件进一步均匀包裹

另请注意，我在演示中使用min-width: 100px;元素li强制换行

正如您评论的那样，您希望每行三个李，而不是使用flex-grow: 1;您需要使用flex: 1 1 33%;类似

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

Demo

示例 3，每行的 li 数量相等

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

进一步调整大小时，它们将自动容纳两个连续和一个连续。