CSS3 多列布局

Created: October-16, 2018

使用 CSS3，你可以在多列中拆分元素的文字內容。

建立多列布局

CSS3 引入了多列布局模組，用於以簡單有效的方式建立多個列布局。現在，你可以建立佈局，就像你在雜誌和報紙中看到的那樣，而不使用浮動框。下面是使用 CSS3 多列布局功能將一些文字拆分為三列的簡單示例。

p {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
       -moz-column-count: 3; /* Firefox */
            column-count: 3; /* Standard syntax */
}

設定列數或寬度

CSS 屬性 column-count 和 column-width 控制是否以及將顯示多少列。column-count 屬性設定 multicol 元素內的列數，而 column-width 屬性設定所需的列寬。

p {
    -webkit-column-width: 150px; /* Chrome, Safari, Opera */
       -moz-column-width: 150px; /* Firefox */
            column-width: 150px; /* Standard syntax */
}

注： column-width 描述列的最佳寬度。然而，根據可用空間，實際列寬可以更寬或更窄。此屬性不應與 column-count 屬性一起使用。

設定列間隙

你可以使用 column-gap 屬性控制列之間的間隙。每列之間應用相同的間隙。預設差距是正常的，相當於 1em 。

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    /* Standard syntax */
    column-count: 3;
    column-gap: 100px;
}

設定列規則

你還可以在列之間新增一條線，即使用 column-rule 屬性的規則。它是在單個宣告中設定規則的寬度，樣式和顏色的簡寫屬性。該 column-rule 屬性採用與 border 和 outline 相同的值。

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    -webkit-column-rule: 2px solid red;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    -moz-column-rule: 2px solid red;
    /* Standard syntax */
    column-count: 3;
    column-gap: 100px;
    column-rule: 2px solid red;
}

注意： 列規則的寬度不會影響列框的寬度，但如果列規則比間隙寬，則相鄰的列框將與規則重疊。

CSS3 多列屬性

下表提供了所有多列屬性的簡要概述：

屬性	描述
`column-count`	指定多列元素內的列數。
`column-fill`	指定內容跨列的分佈方式。
`column-gap`	指定列之間的間隙。
`column-rule`	指定要在每列之間繪製的直線或規則。
`column-rule-color`	指定列之間規則的顏色。
`column-rule-style`	指定列之間規則的樣式。
`column-rule-width`	指定列之間規則的寬度。
`column-span`	指定元素跨越的列數。
`column-width`	指定列的最佳寬度。
`columns`	用於同時設定和屬性的簡寫屬性。 `column-width` `column-count`