Talking about the new characteristic of CSS3 multi-column Layout module

CSS3 has added a multi-column layout module (multi-column), which is used primarily for multi-column layout of text.

Multi-column can be divided into:

① number and column widths: Column-count, column-width, Columns

Column-count: The value is a positive integer, without units, representing the number of columns multi-column, default to Auto (the number of columns depends on other parameters such as Column-width). IE does not support this attribute, the prefix-moz and-webkit are required under Firefox and WebKit.

Column-width: Represents the column width of multi-column, which is PX or EM, but not negative, the default is auto (the number of columns depends on other parameters such as Column-count, but Column-count cannot be auto at this time). IE does not support this attribute, opera11+ support, in Firefox and WebKit need to add prefix-moz and-webkit.

Columns: Combine the two attributes of Column-width and Column-count together. This shorthand mode is only supported under WebKit and opera, and Firefox does not support it.

If both Column-width and Column-gap are set, the actual column width is adjusted according to COLUMN-GAP, not necessarily equal to the set Column-width value.

When you set a column width that is larger than the width of the element container, the element content is not laid out as a column width and the container is burst, and the column widths are reduced to equal to the container width.

In order to be able to fit various screen sizes, it is best to set an exact column width or number of columns, and specify relevant properties, such as width of the element, Column-gap, column-rule-width, etc., if column-gap, Column-rule-width using default values, it is best to explicitly write the values of the good, Column-width, and Column-count in the multi-column design.

② column spacing and breakdown style: Column-gap, Column-rule-color, Column-rule-style, Column-rule-width, Column-rule

In a cross-column layout, Column-gap is equivalent to a gap between two columns, similar to margin, while Column-rule is equivalent to a divider line, similar to border. Column-gap and Olumn-rule are tall, their heights and columns are high, the biggest difference is that COLUMN-GAP does not have any style, and occupies a certain amount of space between columns and columns, and Column-rule has a certain style, similar to border style.

The COLUMN-GAP unit is PX or EM, but cannot be negative, and the default value is normal (1em). IE does not support this attribute, opera11+ support, in Firefox and WebKit need to add prefix-moz and-webkit.

Although Column-gap can be used to change the distance between adjacent columns, when Column-width is set at the same time in a multi-column element, the sum of Column-gap and Column-width is greater than the total width of the multi-column element, which leads to the column being burst and shown in the first column, The width of the column automatically adjusts to the total width of the element.

Column-rule also has border similar properties: Width column-rule-width (default = Medium), style Column-rule-style (default is None), Color Column-rule-color, The difference is that the border occupies a certain space position, and Column-rule does not occupy any space position, the column-rule-width increase does not affect the layout of the column, only extends it to the sides of the element until the edge of the element.

column breaks for ③ columns: Break-before, Break-after, Break-inside

Currently, there are few browsers supported and are not introduced.

④ padding column: Column-fill

Currently, there are few browsers supported and are not introduced.

⑤ spanning columns: Column-span

Column-span is used primarily to define how many columns a child element in a column element can span. Sometimes you need a content or a heading that doesn't have any columns and needs to span all of them, and you need to use the Column-span property. The default value is None, which means that no columns are spanned, and all represents spanning all columns. Currently supported browsers are only Safari, Chrome, opera11+, WebKit need to prefix-webkit.

. multicolumns {-moz-column-count:3;-webkit-column-count:3;column-count:3;-moz-column-gap:30px;- webkit-column-gap:30px;column-gap:30px;}. Multicolumns h1 {Background:red;-webkit-column-span:all;column-span:all;}

Related recommendations:

Layout scheme-multi-column layout

HTML-CSS Multi-Column layout

About multi-column layouts