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