Flexbox「align-items：center」在Chrome beta上無法正常工作

Question

在下面的例子中，所有穩定的支持flexbox的瀏覽器都能正確呈現頁面。

查看jsfiddle here。

由於​​三個彩色塊在section元素分佈均勻：

然而，在最新的Chrome測試版（54）和巴倫西亞（55）版本，相同的例子獲取呈現像這樣：

難道這將成爲align-items在未來的版本中預期的行爲Ø f Chrome？或者這是一個錯誤......

---

UPDATE

Michael_B's answer在這個特殊的佈局清理align-items和align-content之間的差異。他的jsfiddle應該用於測試佈局。

不過，即使有正確的Flexbox的特性，Chrome測試版和金絲雀沒有呈現佈局的方式，他們應該是：

Answer 1

正確的方法來實現上述佈局與align-content: space-around（demo ）。

當處理多線柔性容器時，align-content是要使用的屬性。

從規格：

8.4. Packing Flex Lines: the align-content property

的align-content財產對齊內 柔性容器的線條柔性容器時，存在交叉軸額外的空間， 類似如何justify-content對齊主軸內的各個項目。

請注意，此屬性對單行flex 容器沒有影響。

只有多線柔性集裝箱在橫軸 中有空閒空間才能對齊線條，因爲在單線柔性集裝箱 中，唯一線會自動拉伸以填充空間。