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

Rachel Andrew

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

Browser Support

• 123
• 123
• 125
• 17.4

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

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

align-content プロパティは、Flex コンテナの交差軸に余白があるため、Flex アイテムの行を均等に配置します。

アイテムを上下中央に配置する

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

align-content プロパティは、フレックス コンテナ内で見出しを垂直方向に中央揃えにします。

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

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

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

残念ながら、ブロック レイアウトでの align-content のサポートをテストすることはできません。align-content は flex レイアウトと grid レイアウトで長らくサポートされているため、@supports で機能クエリを使用すると常に true が返されます。これは、flexbox の gap プロパティで発生した状況と同じです。CSS ワーキング グループは、このような部分的な実装の解決策を検討しています。

サイトの配置が意図しないものになっていないか確認する

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