CSS multi-column layout and css multi-Column Layout

CSS multi-column layout and css multi-Column Layout
* Directory [1] column width [2] Columns [3] column spacing [4] column rule [5] cross-column [6] column padding [7] Before multiple columns

CSS adds the multi-column layout feature, allowing the browser to determine when to end a column and start the next column without any additional markup. In simple terms, the content is automatically arranged by the specified number of columns in the CSS3 multi-column layout. This feature achieves a very similar layout effect as newspaper and newspaper layout. This article describes the basic attributes and usage of CSS multi-column layout.

 

Column width

Column-width is mainly used to specify the optimal column width for the element. The actual column width may be wider or narrower. If the height is not set, the text will automatically fill the entire column, and the punctuation of the last column will overflow out of the container

[Note] IE10 + and chrome support standard writing, while firefox, safari, and mobile android and IOS require prefix

Column-width

Value: auto | <length>

Initial Value: auto

Applied to: block, inline-block, and table-cell (firefox does not support setting this attribute for table-cell)

Inheritance: None

[Note] column-width cannot be 0 or negative. When the value of column-width is auto or the value of column-width is greater than half of the width of the element, no effect on data sorting (more accurately, determined by other attributes)

Number of Columns

Column-count is used to specify the maximum number of columns allowed for an element.

[Note] IE10 + and chrome support standard writing, while firefox, safari, and mobile android and IOS require prefix

Column-count

Value: auto | <length>

Initial Value: auto

Applied to: block, inline-block, and table-cell (firefox does not support setting this attribute for table-cell)

Inheritance: None

[Note] the column-count value cannot be 0 or negative. When the column-count value is auto, no effect is displayed by default (more accurately, determined by other attributes)

Column spacing

Column spacing column-gap defines the gap between two adjacent Columns

[Note] IE10 + and chrome support standard writing, while firefox, safari, and mobile android and IOS require prefix

Column-gap

Value: normal | <length>

Initial Value: normal

Applies to: block, inline-block, and table-cell.

Inheritance: None

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

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, and column-rule-color.

[Note] IE10 + and chrome support standard writing, while firefox, safari, and mobile android and IOS require prefix

Column-rule

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

In the standard, column-rule is similar to border, but is more similar to outline because the style does not occupy the actual physical size. Outline details are now

[Note] If the width of column-rule-width is greater than the width of column-gap, it may be displayed in the content of the column box.

Cross-Column

The column-span attribute is used to determine whether a child element is cross-column.

[Note] firefox does not support this attribute. IE10 + and chrome support standard writing, while safari and mobile android and IOS require a prefix.

Column-span

Value: none | all

Initial Value: none

Apply to: block and table-cell elements (only safari supports setting this attribute for table-cell)

Inheritance: None

None: no cross-column all by default: spans all columns

[Note] when the cross-column element is absolutely located (including fixed positioning) or floating, the cross-column element will not take effect.

[Note] when the cross-column element overlaps the modifier line of column-rule, in IE and safari, the cross-column element overwrites the modifier line, and chrome has a bug, the text of the Cross-column element overwrites the modifier line, but the background of the Cross-column element may disappear.

Column filling

In the column layout, sometimes due to insufficient content, the last column in multiple columns often does not have enough content to fill. To achieve the same height of all columns, you need to use the column filling attribute column-fill.

Column-fill

Value: auto | balance

Initial Value: auto

Apply to: block and inline-block

Inheritance: None

Auto: by default, the height of each column changes with the content. balance: the height of each column is consistent based on the column with the most content.

[Note] currently, only firefox supports the column-fill attribute with a prefix.

Multiple Columns

Generally, we only care about whether the column is divided and the column width. We do not consider column spacing. Therefore, the composite attributes of column-width and column-count have been widely used.

Columns: column-width | column-count

[Note] the order is irrelevant because column-width and column-count have different units.

The layout of multiple columns is mainly influenced by the column width, column spacing, number of columns, and element width. The layout equation is

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

In this formula, the column spacing is a fixed value, and the other three values are variable values. The following figure shows the calculation results of each value. N indicates the actual number of columns, and W indicates the actual column width.

[1] If the element width is auto and the column width and number of columns are 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 width is not auto

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

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

[4] if neither the column width nor the number of columns is auto, the element width is not auto

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

[Note] if the number of columns is decimal, only the integer part is retained.

[Note] in all cases, the actual number of columns is calculated first, and then the actual column width is calculated based on the actual number of columns.