小侃CSS3——多列布局

kinchao發表於2018-01-08

為了能在Web頁面中方便實現類似報紙、雜誌那種多列排版的佈局，W3C特意給CSS3增加了一個多列布局模組（CSS Multi Column Layout Module）。它主要應用在文字的多列布局方面，這種佈局在報紙和雜誌上使用了幾十年，但要在Web頁面上實現這樣的效果還是需要一些技巧的，慶幸的是，CSS3的時代來了~~~~多列布局可以輕鬆實現。我們來看一下具體的情況。

看看MDN的解釋

喔吼吼~聽到他怎麼說是不是感覺大塊人心呢~

要注意的一點是

上個程式碼先看看好了
大概就是這個樣子的，注意一下，如果你的寬度設定的太過於寬然後你的文字達不到一定數量級的話，你設定的欄數也會完美的呈現出來喔~只不過高度不限死的話它就會從高度上面給你做手腳給你呈現四欄。

但是！！！！

但是1！！！

如果你文字十分稀少的話，你看看，它為了執行你的要求他也會強行四欄，我們可以看的出他的高度會讓給最高的列，然後再根據要求來進行分欄，到最後字數不夠還是會給你分出來不過是用空白來佔位。

不知道當你看到這種佈局的時候，有沒有心頭突然有種悸動的感覺。這種佈局明明以前就要寫一些其他的樣式來實現啊。可是現在，就是現在，我們已經可以簡簡單單通過CSS3的這一個屬性來實現了啊！

我們首先來看看下面這個屬性表

Properties 屬性	CSS Version 版本	Inherit From Parent 繼承性	Description 簡介
columns	CSS3	無	設定或檢索物件的列數和每列的寬度。複合屬性
column-width	CSS3	無	設定或檢索物件每列的寬度
column-count	CSS3	無	設定或檢索物件的列數
column-gap	CSS3	無	設定或檢索物件的列與列之間的間隙
column-rule	CSS3	無	設定或檢索物件的列與列之間的邊框。複合屬性
column-rule-width	CSS3	無	設定或檢索物件的列與列之間的邊框厚度。
column-rule-style	CSS3	無	設定或檢索物件的列與列之間的邊框樣式。
column-rule-color	CSS3	無	設定或檢索物件的列與列之間的邊框顏色。
column-span	CSS3	無	設定或檢索物件元素是否橫跨所有列。
column-fill	CSS3	無	設定或檢索物件所有列的高度是否統一。
column-break-before	CSS3	無	設定或檢索物件之前是否斷行。
column-break-after	CSS3	無	設定或檢索物件之前是否斷行。
column-break-inside	CSS3	無	設定或檢索物件內部是否斷行。

這樣看可能會比較正式，我們換個法子來看看

列數和列寬：columns、column-count、column-width
列的間距和分列樣式：column-gap、column-rule-color、column-rule-style、column-rule-width、column-rule
跨越列：column-span
填充列：column-fill
分欄符：column-break-before、column-break-after、column-break-inside