フレックスボックス「align-items：center」がChromeベータ版で動作しない

Question

以下の例では、安定したすべてのフレックスボックス対応ブラウザがページを正しくレンダリングしています。

jsfiddle hereを参照してください。しかし、最新のChromeベータ（54）及びカナリア（55）バージョンで、同じ例がレンダリングされる

：3色のブロックが均等section要素に分配されるため​​の

このように：

これは次のバージョンでalign-itemsのための正常な動作になるだろうO fクロム？それとも、この特定のレイアウトにalign-itemsとalign-contentの違いを片付け

---

UPDATE

Michael_B's answer ...このバグです。彼のjsfiddleは、レイアウトをテストするために使用する必要があります。それでも

、でも正しいフレキシボックスのプロパティで、クロームベータおよびカナリアレイアウトの道をレンダリングしていない、彼らは次のようになります。

Answer 1

上記のレイアウトを達成するための適切な方法がalign-content: space-aroundである（demo ）。

マルチラインフレックスコンテナを扱う場合は、align-contentを使用するプロパティです。スペックから

：

8.4. Packing Flex Lines: the align-content property

クロス軸に余分なスペースがあるときalign-contentプロパティが 内フレックスコンテナをフレックスコンテナのラインを揃え、どのようjustify-contentに似 主軸軸 内の個々の項目を揃えます。

このプロパティは、単一行のフレックス コンテナには影響しません。

複数行のフレックスコンテナだけが、十字軸 の空きスペースを持つことがあります。これは、一行のフレックスコンテナでは、 が自動的にスペースを埋めるために伸びるためです。