多列布局中的盒子对齐

The box alignment specification details how alignment works in various layout methods; on this page we explore how Box Alignment works in the context of multi-column Layout. As this page aims to detail things which are specific to Multi-column Layout and Box Alignment, it should be read in conjunction with the main box alignment page which details the common features of Box Alignment across layout methods.

In multi-column layout the alignment container is the content box of the multicol container. The alignment subject is the column box. The properties which apply to multi-column layouts are detailed below.

注意: 多列布局早于盒子对齐规范。这里列出的属性虽然指定用于 Multicol,但在浏览器中可能不支持。

align-content 和 justify-content

The align-content property applies to the block axis and justify-content to the inline axis. Any spacing added to the columns due to use of space distribution will be added to the gap between the columns, therefore making the gap larger than might be specified by the column-gap property.

Using a value of justify-content other than normal or stretch will cause column boxes to display at the column-width specified on the multicol container, and the remaining space distributed according to the value of justify-content.

column-gap

The column-gap property was specified in earlier versions of the multiple-column layout specification, and has now been unified with the gap properties for other layout methods in box alignment. While other layout methods treat the initial value of column-gap as 0 multicol treats it as 1em, as in general you would not want to have no gap between columns.

参考

CSS 属性

词汇表条目