Flexbox“align-items：center”无法使用Chrome测试版

Question

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

请参阅jsfiddle here。

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

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

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

更新

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

尽管如此，即使使用正确的flexbox属性，Chrome测试版和Canary也不会按原样呈现布局：

Answer 1

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

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

来自规范：

  

8.4. Packing Flex Lines: the align-content property

     

align-content属性对齐Flex容器的行   当横轴有额外的空间时，flex容器，   类似于justify-content如何对齐单个项目   主轴。

     

注意，此属性对单线flex没有影响   容器

     

只有多线柔性容器在横轴上才有自由空间   对于要对齐的行，因为在单行Flex容器中   唯一的线条会自动拉伸以填充空间。