Flexbox «align-items: center» не работает на бета-версии Chrome

Question

В приведенном ниже примере все стабильные браузеры, поддерживающие flexbox, отображают страницу правильно.

См. Jsfiddle here.

Из-за align-items: center; три цветные блоки равномерно распределены в section элемента:

Однако на последней Chrome Beta (54) и Канарских (55) версий, тот же самый пример визуализируется как это:

ли это будет ожидаемое поведение для align-items в следующих версиях о f Chrome? Или это ошибка ...

---

UPDATE

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 свойства выравнивает линию гибком контейнера в гибкого контейнер, когда есть дополнительное пространство в поперечной оси, подобно тому, как justify-content выравнивает отдельные элементы в пределах основной оси .

Примечание. Это свойство не влияет на однолинейный изгиб. контейнер.

только многострочные гибкие контейнеры, когда-либо свободное пространство в поперечных осях для линий, чтобы быть выровнены в, потому что в однострочном гибком контейнере единственная линия автоматически растягивается, чтобы заполнить пространство.