文本对齐：居中；忽略显示：弹性元素？

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 之类的前缀，看看它是否适合你。

正确的做法是对ul元素使用display: flex;，在li元素上使用flex-grow...

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，因此每个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，元素包裹得更远

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

---

正如您所说，您希望每行三个 li，而不是使用 flex-grow: 1; 您需要使用 flex: 1 1 33%; like

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

Demo

示例 3，每行的 li 数相同

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

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