文字对齐：中心;忽略显示：flex元素？

Question

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

到目前为止我只在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;元素使用ul，在flex-grow元素使用li ...

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

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

Demo

你在a标签上使用固定宽度，即width: 200px;并且这会破坏flex布局的概念，所以请把它拿出来，然后用我提供的那个改变你的CSS。

在这里，我使用了值flex-grow的{​​{1}}，以便每个1元素共享相同数量的li

---

如果您希望将单元格包装超过容器宽度，则需要在width元素上使用以下属性，如

ul

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

样本1，包裹的元素将拉伸到全宽

---

样本2，元素包裹得更进一步

另请注意，我在ul { display: flex; padding: 0; width: 40%; margin: auto; border: 1px solid gold; flex-direction: row; flex-flow: row wrap; } 元素上使用min-width: 100px;来强制包装演示

---

正如您评论的那样，您想要在每一行上使用三个li，而不是使用li，而是需要使用flex-grow: 1;

flex: 1 1 33%;

Demo

样本3，每行等于li的数量

样本4，即使调整大小，每行也有相等数量的li

在进一步调整大小时，它们会自动容纳连续两行和一行......