【CSS Modules】align-contentプロパティの使い方

align-contentプロパティは、CSSのFlexbox（フレックスボックス）およびCSS Grid（グリッド）レイアウトにおいて、複数の行（または列）を持つコンテナ内のコンテンツの配置方法を制御するプロパティです。

Flexboxレイアウトでは、フレックスコンテナがflex-wrap: wrapによって複数行に折り返された場合に、これらの行（フレックスラインと呼ばれます）がコンテナの交差軸方向（通常は垂直方向）でどのように配置されるかを決定します。具体的には、すべてのフレックスラインをコンテナの開始位置に寄せる、中央に配置する、終了位置に寄せる、またはフレックスライン間に均等なスペースを分配するといった調整が可能です。これにより、余分なスペースがある場合に、複数行のアイテム群がコンテナ内でどのように配置されるかを細かく制御できます。ただし、フレックスコンテナが単一行である場合、このプロパティは効果を発揮しません。

CSS Gridレイアウトにおいては、グリッドコンテナ内でグリッドトラック（行または列の集合）がどのように配置されるかを制御します。グリッドコンテナ内に余白がある場合、align-contentプロパティはその余白をグリッドトラック間にどのように分配し、全体としてグリッドをコンテナ内のどこに配置するかを定義します。例えば、グリッド全体をコンテナの先頭、中央、末尾に配置したり、グリッドトラック間に均等なスペースを設けたりすることが可能です。

このプロパティは、コンテナ内の余白と複数行・複数列のアイテムのグループの配置を細かく調整し、柔軟でレスポンシブなレイアウトを構築するために重要な役割を果たします。

Copy
1.container {
2  align-content: center;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません