html - Flexbox "align-items: center"不适用于 Chrome 测试版

Question

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

参见 jsfiddle here .

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

但是，在最新的 Chrome Beta (54) 和 Canary (55) 版本中，相同的示例会像这样呈现:

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

---

更新

Michael_B's answer清除了此特定布局中 align-items 和 align-content 之间的差异。他的jsfiddle应用于测试布局。

尽管如此，即使使用了正确的 flexbox 属性，Chrome beta 和 Canary 也没有按照应有的方式呈现布局:

Answer 1

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

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

来自规范:

8.4. Packing Flex Lines: the align-content property

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

Note, this property has no effect on a single-line flex container.

Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.