align-contentの話
align-content in block layoutがChrome123にやってくる
対象ボックス内のブロック方向の整列を指定するプロパティ
display:blockの要素でも使える
縦中央揃えのためだけにflexやgridにする必要がなくなりそう
Note: Support for align-content in block layout is also in Safari 17.4 beta, and in development in Firefox.
仕様上はずっと使えることになってたがどこにも実装されていなかったらしい
code:css
.center {
align-content: center;
}
justify-contentとの対応
justify-content は対象ボックス内のコンテンツのインライン方向の整列
align-content とjustify-contentはちょうど対になる
この2つを同時に設定するためのショートハンドとして place-content プロパティ
place-content: center で水平・垂直の中央揃え
Specを読んでみよう
https://scrapbox.io/files/65da90a38c02090025c1009b.png
"Content Distribution" コンテンツ分布？分配？
Aligns the contents of the box as a whole (as the alignment subject) within the box itself (as the alignment container): along the inline/row/main axis of the box (for justify-content) or the block/column/cross axis of the box (for align-content).
5.3. Overflow and Scroll Positions
When the content-distribution properties are set on a scroll container with an overflowing alignment subject, rather than shifting the layout positions of its content, they instead change its initial scroll position so that the initially-visible content of the scroll container satisfies the expected alignment of the alignment subject and alignment container.
まとめ
align-contentがblockレイアウトで使えるようになりそう
Box Alignment Moduleの仕様書はけっこう読みやすい
仕様書に書かれているからといって実装されているかどうかはわからない