Question

我刚刚阅读了David的文章 HERE ，并决定尝试一下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;
}

FIDDLE HERE

现在讨厌的部分是4个div并不完全居中，而是间隔开。为什么会这样？

我相信这是一个典型的新手问题，对于有人迁移到flexbox，但我真的无法找到解决这个问题的方法。

任何人都可以帮助我理解为什么align-items:center;没有按预期工作？

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

DEMO

align-content

align-content属性对齐Flex容器的行   当横轴有额外的空间时，flex容器，   类似于justify-content如何对齐单个项目   主轴。 注意，此属性对单行flex不起作用   容器。 （强调我的）

对齐项：中心;不按预期工作

1 个答案: