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.
Note: Multi-column Layout predates the Box Alignment specification. and the properties listed here, while specified for Multicol, may not be supported in browsers.
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
Using a value of
justify-content other than
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 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.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.