【CSS】フレキシブルボックス(flexible box)内の Flexアイテムの行の垂直方向(cross-axis)の配置方法(align-content)

align-contentの指定

align-content プロパティは、Flexコンテナのcross axis(交差軸/副軸) 上に余分なスペースがある場合に、行上のflex アイテムの配置法を示します。

このプロパティは、主軸(main axis)方向への配置方法を指定する justify-contentプロパティと対して、垂直方向への配置方法を指定します。

ただ単一行の場合は、そのプロパティの効果は無効です。またflex-wrapプロパティの値が nowrapの場合も無効となります。複数行になった場合にこのプロパティは有効となります。

「align-content: flex-start;」では、Flexアイテムはcross-startを始点(起点)に詰められます。

最初の行のcross-startの端とFlexコンテナのcross-startの端が揃えられます。2行目以降の行ボックスは行に合わせて間隔を空けずに配置します。

[CSS]　flex-start

 .flex-start｛
　　-webkit-align-content: flex-start;
　　align-content: flex-start;
　　}

「align-content: flex-end;」はflex-start値の逆です。FlexアイテムはFlexコンテナのcross-end終点の終端位置で揃えます。

最後の行のcross-endの端とFlexコンテナのcross-endの端が揃えられます。行ボックスの間に間隔を空けずに配置します。

[CSS]　flex-end

 .flex-end｛
　　-webkit-align-content: flex-end;
　　align-content: flex-end;
　　}

「align-content: center;」はFlexアイテムを中央寄せに収納します。すべての行を間隔を空けずに並べた上、 corss-axis(交差軸)のcross-start(始点)とcross-end(終点)の間にで配置されます。

行ボックスは互いに寄せられ、間に間隔を空けずに配置します。Flexコンテナのcross-startからFlexアイテムの最初の行までの余白と、Flexコンテナのcross-endからFlexアイテムの最後の行までの余白は同じです。

[CSS]　center

 .center｛
　　-webkit-align-content: center;
　　align-content: center;
　　}

「align-content: stretch;」では、Flexコンテナ内の行間の余白を埋めるように行ボックス(cross size)を拡張します。余白はすべての行へ均等に分配します。

行間の空きスペースを埋めるように行ボックスを拡張します。Flexコンテナ内に埋める余白がない場合は、flex-start値を指定したのと同じになります。

[CSS]　stretch

 .stretch｛
　　-webkit-align-content: stretch;
　　align-content: stretch;
　　}

「align-content: space-between;」では、Flexアイテムの行はFlexコンテナ内で均等に配置されます。隣接するFlexアイテム間の余白が同じになるように余白が埋められます。

Flexコンテナの cross-start(始点)とcross-end(終点) の端それぞれに、最初の行ボックスと最後の行ボックスが寄せられます。

[CSS]　space-between

 .space-between｛
　　-webkit-align-content: space-between;
　　align-content: space-between;
　　}

「align-content: space-around;」では、Flexコンテナ内に最初の行の前と最後の行の後に半分の間隔を空けて行を等間隔に並べます。

Flexコンテナ内に余白ができない場合は、center値を指定した場合と同じです。隣接する行間の余白が同じになるように、行が均等に配置されます。

[CSS]　space-around

 .space-around｛
　　-webkit-align-content: space-around;
　　align-content: space-around;
　　}