多列布局中的盒模型对齐

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 — 您通常希望列之间有间隙。

另见