align-items:center;未按预期工作

Question

我刚刚在阅读David的文章这里，决定尝试一下flexbox，于是我做了以下的示例：

<div class="wrpr">

        <div></div>
        <div></div>
        <div></div>
        <div></div>

</div>

CSS

.wrpr {
    display: flex;
    border: 5px solid tomato;
    height: 300px;
    align-items:center;
    flex-wrap:wrap;
}

.wrpr div {
    background: #eee;
    height: 50px;
    width: 49%;
    margin: 0 .5%;
}

.wrpr div:nth-child(odd) {
    background: #727272;
}

代码链接

现在很烦人的是这四个div并没有居中，而是分散开来。为什么会发生这种情况呢？

我相信这是典型的新手问题，对于那些刚开始使用flexbox的人来说，但我真的找不到解决这个问题的方法。

有人能帮我理解为什么align-items:center;没有按预期工作吗？

- Alexander Solonik

Answer 1

您需要使用align-content来控制多行间距。align-items仅适用于单行。请在您的代码中添加一行：

.wrpr {
  display: flex;
  border: 5px solid tomato;
  height: 300px;
  align-items: center;
  align-content: center; /* new */
  flex-wrap: wrap;
}

演示

align-content

align-content 属性用于在交叉轴上的多条线之间对齐弹性容器内的行，当存在额外空间时，类似于 justify-content 用于对齐主轴上的单个项。请注意，这个属性对于单行的弹性容器没有任何作用。（我强调）

- Michael Benjamin

---

所以你已经使用了 align-items: center; 和 align-content: center;，这就是我相信的正确方式？ - Alexander Solonik

通过同时包含两者，您可以覆盖两个方面：如果只有一行，则align-items将生效。如果有多行，则align-content接管。 - Michael Benjamin

事实上，在这里并不需要使用 align-items。 - Ilya Streltsyn

@IlyaStreltsyn，正确。在这种情况下并不是必需的。但是，我建议在 flex 项目都在一行上时（例如，flex 项目被删除或不换行等）保留它。基本上，保留它没有任何缺点，但删除它的缺点可能会很大。 - Michael Benjamin