flex-box のalign-itemsプロパティは、justify-contentが主軸に沿って整列するのと同様に、Flex コンテナ内の項目を水平軸に沿って整列します。 (デフォルトのflex-direction: rowでは、交差軸が垂直方向に対応し、主軸が水平方向に対応します。flex-direction: columnを使用する場合、これら 2 つは、軸は個別に互いに位置合わせできます。変更)。

次に、align-items:centerの例を示します:

ただし、align-contentは複数行のフレックスボックスでも機能します。アイテムが連続している場合は効果がありません。その値に従って構造全体を調整します。align-content: space-around;の例を次に示します。

これは、align-content: space-around;とalign-items:centerの例です:

最初の行の 3 番目のボックスと他のすべてのボックスが、その行の垂直方向の中央に配置されるように変更されていることに注目してください。

使用できるコードペンのリンクをいくつか示します:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

これは非常にクールなペンで、Flexbox 内のほぼすべてのものを表示して使用できるようにします。