Chrome 123 以降では、ブロック レイアウトとテーブル レイアウトで CSS Box Alignment の align-content プロパティを使用できます。これにより、フレキシブル レイアウトやグリッド レイアウトを作成しなくても、ブロックの方向を揃えることができます。ただし、これらのレイアウト メソッドの外部で align-content を使用した場合は、CSS が有効になるため、CSS の更新が必要になることがあります。
対応ブラウザ
- 123
- 123
- 125
- 17.4
Flex レイアウトとグリッド レイアウトの align-content
Flex アイテムまたはグリッド トラックの配置に align-content を使用したことがあるかもしれません。Flex レイアウトでは、Flex コンテナで align-content プロパティを使用して、Flex アイテムを交差軸上で配置します。次の例では、値が space-between であるため、Flex コンテナ内の使用可能なスペースを Flex 行間で分配しています。
align-content プロパティは、Flex コンテナの交差軸に空きスペースがあるため、Flex アイテムの行をスペースに配置します。アイテムを縦方向の中央に配置する
align-content は、コンテナ内でアイテムを垂直方向に中央揃えする場合に特に便利です。そのためには、display: flex と align-content: center を使用します。これにより、アイテムがフレキシブル アイテムになり、他のデフォルトのフレキシブル アイテムの動作も有効になります。次の例では、見出しが垂直方向の中央に配置され、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 コンテナまたはグリッド コンテナ以外のものに追加している場合は、Chrome 123 より有効になります。CSS で align-content を使用しているかどうかを検索し、必要に応じてベータ版を使用してサイトとアプリケーションをテストします。