ブロック レイアウトとテーブル レイアウトでの align-content のサポート

Rachel Andrew

Chrome 123 以降では、ブロック レイアウトと表レイアウトで CSS ボックス アライメントの align-content プロパティを使用できます。これにより、フレックス レイアウトやグリッド レイアウトを作成せずに、ブロックの向きを揃えることができます。ただし、これらのレイアウト メソッドの外部で align-content を使用している場合は、align-content が有効になるため、CSS を更新する必要があります。

Browser Support

• 123
• 123
• 125
• 17.4

align-content - フレックス レイアウトとグリッド レイアウト

align-content を使用して Flex アイテムやグリッド トラックを配置したことがあると思います。Flex レイアウトでは、Flex コンテナで align-content プロパティを使用して、Flex アイテムを交差軸に揃えます。次の例では、値が space-between であるため、フレックス コンテナ内の使用可能なスペースがフレックス行間で分散されます。

align-content プロパティは、Flex コンテナの交差軸に余分なスペースがあるため、Flex アイテムの行を間隔を空けて配置します。

アイテムを縦方向に中央揃えにする

align-content が特に役立つのは、コンテナ内でアイテムを垂直方向に中央揃えする場合です。そのためには、align-content: center とともに display: flex を使用します。これにより、アイテムがフレックス アイテムになり、他のデフォルトのフレックス アイテムの動作も有効になります。次の例では、align-content: center を使用してヘッダーが垂直方向に中央揃えされています。これにより、アイテムはコンテンツに合わせて縮小されるため、アイテムに flex-grow: 1 を適用する必要があります。

align-content プロパティは、Flex コンテナ内でヘッダーを垂直方向に中央揃えにします。

ブロック レイアウトで align-content を使用することで、プロパティが機能するようにフレックス レイアウトを作成することなく、垂直方向の配置を実現できます。アイテムはブロック アイテムのままであるため、追加のプロパティは必要ありません。変更されるのは配置のみです。

align-content プロパティは、ブロック コンテナ内でヘッダーを垂直方向に中央揃えします（Chrome 123 または Safari 17.4 以降が必要です）。

ブロック レイアウトでの align-content のサポートをテストする

残念ながら、ブロック レイアウトで align-content のサポートをテストすることはできません。align-content は長い間、フレックス レイアウトとグリッド レイアウトでサポートされているため、@supports で特徴クエリを使用すると、常に true が返されます。これは、flexbox の gap プロパティで発生した状況と同じです。CSS ワーキング グループは、このような部分的な実装に対するソリューションの調査を行っています。

サイトに予期しない配置がないかどうかを確認する

align-content プロパティは、長年にわたり仕様でブロック レイアウトの処理として定義されてきました。これらのコンテキスト以外で align-content をサポートするブラウザがないため、何も行われませんでした。ただし、このプロパティを flex コンテナまたは grid コンテナ以外のものに追加した場合は、Chrome 123 以降で効果が適用されます。CSS で align-content の使用を検索し、該当する可能性がある場合はベータ版を使用してサイトとアプリをテストします。