New in CSS3: summary of CSS3 Multi-column layout properties (with instance)

CSS3 the properties of multi-column layouts, what is multi-column layout? The so-called multi-column layout, is to create multiple columns to layout the text, such as the newspaper layout is similar, then, in this article we will look at the multi-column layout of some related properties and code examples.

CSS3 Properties of multi-column layout containers:

Column-width:auto | < length >: defines a minimum width (min-width) for the column.

Auto: Column width is determined by other elements.

Length: Sets the minimum width explicitly.

Column-count:auto | < integer >: Defines the number of columns.

Auto: element has only one column. It's like there's no setting.

< integer;: positive integer value. The value is an integer greater than 0 and the negative value is invalid.

columns: < column-width > | < column-count >: Column-width and Column-count. The order is arbitrary.

Column width = (parent element width-(Number of columns-1) column gap)/number of columns *
For example: parent element 40em, divided into 4 columns, the column gap is 2EM. Then the column width is (4-1) * 2)/4 = 8.5em.
If you explicitly set the column width to less than this width, it will be displayed at this width.
If the explicitly set column is larger than this width, it rearranges the column width and the number of columns according to the appropriate size. The column width and number of columns currently set are not accurate.

Column-gap:normal | < length >: Defines the column spacing. When the value is too large, the layout will burst.

Normal: The default value, parsed by the browser, is usually Lem.
< length: A value consisting of a floating-point number and a unit identifier. such as: 2.1em.

Column-rule: < Column-rule-width > < Column-rule-style > | < column-rule-color >: Define column borders.

Its centerline is always the same as the centerline of the column spacing. In other words, it is always in the middle of two columns. Similar to the border. If the column border is greater than the column spacing, it does not automatically disappear. The portion of the column border that is outside the column spacing is like sinking below the text (background effect).

Column-fill:auto | Balance: Defines whether the height of each column in multiple columns is uniform.

This attribute is very strange. and is not unified in the browser. It has a value of two: Auto | Balance The results of the tests in ie10/ie11/opera40/chrome52 are the same, and the two properties are found to be no different. In firefox49 test, the two properties are different, where balance is the height of each column (aligned), auto is automatically merged into a column, no matter how many columns you set.

CSS3 Multi-column layout item (Element) Properties:

Column-span:none |All: Defines how many columns an element spans.

If we often use headings across all columns. So, Column-span:all. The default value is Column-span:none, which means no cross-columns.

CSS3 multi-Column Layout code:

     <! DOCTYPE html> 
Operating effect: