This is the 24th day of my participation in the August More Text Challenge

Use a multi-column layout when:

  • You want your text to look like a newspaper layout.
  • You have a set of small items to be divided into columns.
  • You do not need to style the specified column separately.

To create columns with a multi-column layout, text fills each column in turn in a continuous stream. The columns must be identical, including size and style.

Container-specific properties

column-count

Column-count, which describes the number of columns in which the element should be split.

Grammar:

column-count: number|auto;
Copy the code

  • Number: indicates the maximum number of columns in which the content is divided. If column-width is also set to a non-zero value, the actual number of columns may be less than column-count.

    column-count: 100;
column-width: 100px;
Copy the code

    There are actually only five columns:

  • Auto: The number of columns is specified by other CSS properties, such as column-width

    column-count: auto;
column-width: 200px;
Copy the code

column-width

Column-width sets the ideal width of the column.

This can be wider when the available space needs to be filled (for example, column-count is smaller) and narrower when the available space is too small (for example, the container width is too small).

  • <length>, non-negative, percentages are invalid.
  • auto, the column width depends on other attributes, such ascolumn-count.

columns

Short properties for column-width and column-count.

Grammar:

columns: column-width column-count;
Copy the code

column-fill

Column-fill, which specifies how to fill columns:

  • balance: Default value, try to evenly distribute the content.

  • auto: Fill it in sequence

column-gap

Column-gap specifies the gap between columns.

  • normalIn:Multi-columnThe default interval for layout is1em, the default interval for other types of layouts is0.
  • <length>: Non-negative number.
  • <percentage>: non-negative, based on the width of the container.

This attribute was originally specific to multi-column layouts, but is now available in Flexible boxes as well as Grid layouts.

As for its compatibility, IE is not compatible, but it is compatible in Edge:

column-rule

In a multi-column layout, column-rule describes the style of the lines between columns, and it is shorthand for all the column-rule-width, column-rule-style, and column-rule-color attributes.

Grammar:

column-rule: column-rule-width column-rule-style column-rule-color;
Copy the code

Can be remembered as border.

  • Column-rule-color: Specifies the color of the border between two columns

  • Column-rule-style: Specifies the style of the border between two columns

  • Column-rule-width: specifies the thickness of the border between two columns

Column dependent attributes

column-span

Column-span, which specifies whether the element should span all columns

  • none, default, not across columns.
  • all, the element spans all columns. This element creates a NEW BFC, and the content in the normal flow before the element is automatically balanced between all columns.

Brief introduction to the new characteristics of CSS3

  • Border Border
  • Background & Gradient
  • Text Indicates the Text & @font-face
  • Transform element Transform
  • Transition effect
  • Animation Animation
  • Column Multi-column layout
  • Resize & Box-sizing & Outline-offset
  • Images into the order
  • Button in the advanced
  • Multimedia Query