Flexbox"align-items:center"无法使用Chrome测试版

Question

在下面的示例中,所有支持flexbox的稳定浏览器都能正确呈现页面.

在这里看到j​​sfiddle .

由于align-items: center;三个彩色块均匀分布在section元素中:

但是,在最新的Chrome Beta(54)和Canary(55)版本中,相同的示例呈现如下:

这是否会成为align-items下一版Chrome中的预期行为？或者这是一个错误......

---

UPDATE

Michael_B的回答清理之间的差异align-items,并align-content在这个特殊的布局.他的jsfiddle应该用于测试布局.

尽管如此,即使使用正确的flexbox属性,Chrome测试版和Canary也不会按照应有的方式呈现布局:

Answer 1

实现上述布局的正确方法是使用align-content: space-around（demo）。

\n\n

处理多行弹性容器时，align-content是要使用的属性。

\n\n

从规格来看：

\n\n

\n

8.4. 包装 Flex 线：align-content\n 属性

\n\n

align-content当横轴上存在额外空间时，该属性会在 Flex 容器内\xe2\x80\x99 行中对齐 Flex 容器，\n 类似于justify-content在主轴内\n 对齐各个项目的方式。

\n\n

请注意，此属性对单行 Flex\n 容器没有影响。

\n\n

只有多行 Flex 容器在横轴上才有可用空间，\n 用于对齐行，因为在单行 Flex 容器中\n，唯一的行会自动拉伸以填充空间。

\n

\n