多列布局中的盒模型對齊

CSS 盒對齊模組詳細介紹了對齊在各種佈局方法中的工作原理;本指南將探討盒對齊在多列布局上下文中的工作原理。由於本指南旨在詳細介紹這兩個模組特有的內容,因此應結合盒對齊概述指南閱讀,該指南詳細介紹了盒對齊在各種佈局方法中的共同特性。

多列布局中,對齊容器是多列容器的內容盒。對齊主題是列盒。適用於多列布局的屬性如下所述。

align-content 和 justify-content

align-content 屬性適用於塊軸,justify-content 屬性適用於內聯軸。由於使用空間分佈而新增到列的任何間距都將新增到列之間的間隙中,因此使間隙大於 column-gap(或 gap 簡寫)屬性可能指定的間隙。

使用 justify-content 的值(除了 normalstretch)將導致列盒以多列容器上指定的 column-width 顯示,剩餘空間根據 justify-content 的值進行分佈。

column-gap

column-gap 屬性最初在多列布局規範中指定,後來在盒對齊中與其他佈局方法的間隙屬性統一。雖然其他佈局方法將 column-gap 的初始值視為 0,但多列布局將其視為 1em — 您通常希望列之間有間隙。

另見