Chrome 123で、divなどのブロック要素で垂直方向の中央にalign-contentプロパティで配置できるようになります

Post on:2024年3月7日

sponsors

間もなくリリースされるChrome 123（リリース情報）で、ブロックやテーブルレイアウトでのalign-contentプロパティがサポートされます。

これにより、div要素内に簡単に垂直方向の中央に配置できるのは嬉しいニュースです。しかし、既存サイトでalign-contentプロパティをflexやgridコンテナ以外に使用している場合、Chrome 122までは何もしませんでしたが、Chrome 123以降は適用されて異なるレイアウトになってしまう可能性があります。
これは同様に間もなくリリースされるSafari 17.4にも適用されます。

Chrome 123で、divなどのブロック要素で垂直方向の中央にalign-contentプロパティで配置できるようになります

Support for align-content in block and table layouts
by Rachel Andrew

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

はじめに
flexおよびgridレイアウトでのalign-content
アイテムを垂直方向の中央に配置する
ブロックレイアウトでのalign-contentのサポートをテスト
既存サイトでの注意点

はじめに

2024年3月にリリース予定のChrome 123では、ブロックやテーブルレイアウトでCSS Box Alignment Module Level 3のalign-contentプロパティが使用できるようになります。これはCSS GridやFlexboxを使用しなくても、ブロック方向の整列が可能になるプロパティです。ただし、これらのレイアウト方法以外でalign-contentを使用していた場合は、既存のCSSをアップデートする必要があります。

ブロックレイアウトでのalign-contentプロパティのサポートは、Safari 17.4ベータ版でもサポートされており、Firefoxでも開発中です。

flexおよびgridレイアウトでのalign-content

flexアイテムやgridトラックを整列させるために、align-contentを使用したことがあると思います。flexレイアウトではflexコンテナでalign-contentプロパティを使用して、flexアイテムを交差軸（横軸）上に整列させます。下記のデモでは、space-between値が設定されているため、flexコンテナ内の利用可能なスペースをflex行の間に分配しています。

See the Pen
align-content in a flex layout by coliss (@coliss)
on CodePen.

flexコンテナには交差軸に予備のスペースがあるため、align-contentプロパティはflexアイテムの行のスペースをあけます。

アイテムを垂直方向の中央に配置する

align-contentプロパティが特に役立つのは、コンテナ内でアイテムを垂直方向の中央に配置する場合です。これを実現するには、display: flex;とalign-content: center;を使用します。

この2つを設定することで、アイテムはflexアイテムになり、他のデフォルトのflexアイテムのビヘイビアも有効になります。

下記のデモではalign-content: center;を使用して、見出しが垂直方向の中央に配置されています。アイテムはコンテンツに合わせて縮小されるため、flex-grow: 1;を設定しておくとよいでしょう。

See the Pen
align-content: center in flex layout by coliss (@coliss)
on CodePen.

コンテナ内で垂直方向の中央に配置するときは、align-contentプロパティが便利です。

align-contentプロパティがブロックレイアウトで利用できるようになったことで、このプロパティが機能するためにflexレイアウトを作成しなくても、垂直方向の整列が実現できるようになります。アイテムはブロックアイテムのままなので、追加のプロパティは必要ありません。

See the Pen
align-content: center in block layout (needs Chrome 123+ or Safari 17.4+) by coliss (@coliss)
on CodePen.

align-contentプロパティは、ブロックコンテナ内で垂直方向の中央に配置します（Chrome 123+またはSafari 17.4+でご覧ください）。

【訳者注】原文には123+とあるけど、Chrome 122 for Winでは上部でしたが、Chrome 122 for macOSでは中央に配置されました。Safari 17.3.1は上部に配置されます。

上記デモのChrome 122 for Winでの表示

上記デモのChrome 122 for macOSでの表示

上記デモのSafariでの表示

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

残念ながら、ブロックレイアウトでalign-contentのサポートをテストすることはできません。align-content自体はCSS GridやFlexboxでサポートされていたため、@supportsを使用しても常にtrueが返されます。これはFlexboxのgapプロパティで発生したのと同じ状況です。 CSS Working Groupではこのような部分的な実装に対する解決策を検討しています。