html - 文本对齐 : center; ignored for display: flex element?

Question

对于以下内容， anchor 文本未居中。如果我将 anchor 的显示从 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

Note: Before you go ahead to read my answer, I would like you to notify that am not using any of the PROPRIETARY PREFIXES, if it doesn't work for you, its time to update your browser, or try adding the prefixes like -moz or -webkit and see if it works for you.

正确的做法是使用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 修改你的 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，被包裹的元素将拉伸(stretch)到全宽

---

示例 2，元素进一步平均包裹

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

---

正如您所说，您想要每行三个 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 数量相同

在进一步调整大小时，它们将自动容纳两个并排一个......