CSS multi-column layout

xTable of Contents [1] column width [2] Number of columns [3] column spacing [4] column Rule[5] cross-column [6] column fill [7] Multi-column front

CSS adds a multi-column layout feature that lets the browser determine when to end a column and start the next column without any additional markup. Simply put, the CSS3 multi-column layout automatically arranges the content by the number of columns you specify, and this feature achieves a layout that is very similar to that of a newspaper or magazine. This article will detail the basic properties and usage of CSS multi-column layouts

Column width

Column-width is primarily used to specify the optimal column width for an element, and the actual column widths may be wider or narrower. If you do not set the height, the text will automatically fill the entire column, and the last column of punctuation will overflow outside the container

Note Ie10+ and chrome browsers support standard notation, while Firefox, Safari and mobile Android and iOS need to be prefixed

Column-width

Value: Auto | <length>

Initial value: Auto

Applies To: block, Inline-block, Table-cell (Firefox does not support setting this property for Table-cell)

Inheritance: None

[Note that]column-width cannot be 0 and negative; When the value of Column-width is auto or column-width is greater than half the width of the element, there is no column effect (more precisely, determined by other properties)

Number of columns

Column-count is primarily used to specify the maximum allowable number of columns for an element

Note Ie10+ and chrome browsers support standard notation, while Firefox, Safari and mobile Android and iOS need to be prefixed

Column-count

Value: Auto | <length>

Initial value: Auto

Applies To: block, Inline-block, Table-cell (Firefox does not support setting this property for Table-cell)

Inheritance: None

[Note that]column-count cannot be 0 and negative, and when the value of Column-count is auto, the default does not have a column effect (more accurately, determined by other properties)

Column Spacing

Column spacing Column-gap to define white space between adjacent two columns

Note Ie10+ and chrome browsers support standard notation, while Firefox, Safari and mobile Android and iOS need to be prefixed

Column-gap

Value: Normal | <length>

Initial value: Normal

Applies To: block, Inline-block, Table-cell

Inheritance: None

[Note that the normal value of]column-gap is equivalent to 1em by default.] Column-gap value cannot be negative

Column rule

This property is used to draw a line at the horizontal center of the column spacing. This style consists of three styles, Column-rule-width, Column-rule-style, Column-rule-color

Note Ie10+ and chrome browsers support standard notation, while Firefox, Safari and mobile Android and iOS need to be prefixed

Column-rule

Value: <column-rule-width> | | <column-rule-style> | | <column-rule-color>

The standard says column-rule is similar to border, but actually more like outline, because the style does not occupy the actual physical size. Outline details of this

[note] If the width of the column-rule-width is greater than the width of column-gap, it may appear in the Column box contents

Cross-column

The Column-span property is used to define whether child elements span columns

[Note]firefox does not support this property, ie10+ and chrome browsers support standard notation, while Safari and mobile Android and iOS need to be prefixed

Column-span

Value: none | All

Initial value: None

Applies To: block element, Table-cell element (only Safari supports setting this property for Table-cell)

Inheritance: None

None: Default not across columns all: across all columns

[note] When the cross-column element is absolutely positioned (including fixed positioning) or floats, the cross-column will not take effect

[note] When the cross-column element overlaps with the column-rule, in IE and Safari, the cross-column element overrides the modifier line, and the Chrome browser has a bug that spans the text of the column element, overwriting the adornment line, but the background of the cross-column element may disappear.

Column padding

In a column layout, sometimes because of insufficient content, the last column in multiple columns often does not have enough content to fill, and to implement all columns with the same height effect, you need to use column fill properties Column-fill

Column-fill

Value: Auto | Balance

Initial value: Auto

Applies To: block, Inline-block

Inheritance: None

Auto: Default column height varies with content balance: Column heights are consolidated according to the column with the most content

[note] Currently only Firefox supports the Column-fill attribute with prefix

Multiple columns

In general, we only care about whether the columns and column widths are not considered. As a result, the composite properties of column, Column-width and Column-count, are widely used

Columns:column-width | | Column-count

[note] because the units of the two values are different in column-width and Column-count, the order is irrelevant

As you know, multi-column layouts are primarily influenced by column widths, column spacing, number of columns, and element width, and the layout equation is

     Element width = number of columns * column width + (number of columns-1) * Column spacing <=> number of columns * (width + column spacing)-Column spacing = element width     or number of columns = (element width + column spacing)/(column widths + column spacing) or width     = (element width + column spacing)/Number of columns-column spacing 

In this equation, the column spacing is fixed, the other three values are variable values, the following is the calculation of the individual values, where n is the actual number of columns, W is the actual column width

"1" If the element width is auto and the column and column count is not auto

Then N = Column-count W = column-width;

"2" If the column width is auto, but the number of columns is not auto, the element widths are not auto

Then N = Column-count W = max (0, (element width-((N-1) * column spacing)/n)

' 3 ' If the column width is not auto, but the number of columns is auto, the element width is not auto

n = max (1,floor (element width + column spacing)/(Width + column spacing) W = ((element width + column spacing)/N)-Column spacing

"4" If column widths and columns are not auto, the element width is not auto

n = min (width, floor (element width + column spacing)/(Width + column spacing)) W = ((element width + column spacing)/N)-Column spacing

[note] If the number of columns is a decimal, only the integral part is retained

[note] In all cases, the actual column number is calculated first, and the actual column width is calculated by the actual number of columns

CSS multi-column layout