他們太擔(dān)心來世了，以至于都沒學(xué)會怎樣在這個世界上生活。 ——《殺死一只知更鳥》
CSS3新增了多列布局特性，它可以讓瀏覽器確定何處結(jié)束一列和開始下一列，簡單的說，就是CSS3多列布局可以自動將內(nèi)容按指定的列數(shù)排列。多列布局的主要屬性有：
- column-width: 類似于給列定義一個最小寬度
- column-count: 指定想要的列數(shù)或者說是最大列數(shù)
- column-gap: 定義列間距，相當(dāng)于margin屬性
- column-rule: 定義列邊框，相當(dāng)于border，不過它不占任何空間
- column-span: 定義多列布局中子元素的跨列效果
- column-fill: 控制每列的列高應(yīng)該是一樣的還是自適應(yīng)的，瀏覽器支持情況較差。不建議使用
下面逐一介紹上面列舉的屬性。
1.column-width
它在多列布局中限制了每列的寬度或者說是每列的最小寬度（當(dāng)分列布局容器能夠裝下那么多元素且分列布局容器寬度值大于column-width的時候）。下面我們考慮這種情況：在使用多列布局的時候，如果我們只設(shè)置column-width屬性的話，那么當(dāng)多列容器放不下它的子元素的時候會出現(xiàn)什么情況呢？答案就是會在X方向上分多列，盡管你沒有顯示column-count的值，但是此時瀏覽器會根據(jù)自己的計(jì)算去在x軸方向分多列以容納多余的子元素。這個時候需要注意的是，多列布局容器并不會被因此變得更大。而且這個時候，每一列的寬度完全有瀏覽器決定，感覺很不可控。
如果多列布局容器能夠容納那么多元素的話，那么每一列的元素仍舊有瀏覽器決定。
2.column-count
它在多列布局中指定了希望的分列數(shù)或者說是最大分列數(shù)。考慮下面這些情況：如果我們我們的分列布局容器裝得下那么多子元素的話，那么我們單單設(shè)置column-count的話會有什么效果？答：分列數(shù)可能和我們?yōu)閏olumn-count設(shè)置的值不同，因?yàn)榇藭r分列布局容器有足夠的空間去容納子元素，所以這里的column-count只是一個最大分列數(shù)。這個時候分多少列，完全有瀏覽器考慮，但絕對會小于column-count設(shè)定值。
考慮下面這個情況：如果多列布局沒有足夠的空間去容納子元素的話，那么我們單單設(shè)置column-count的話會有什么效果？答：首先，盡管放不下但是這么多子元素，但是分列布局容器并不會因此變得更大。這個時候，column-width設(shè)置的值將不會決定分列數(shù)量或者說在一定程度上也決定了。為什么這么說呢？先解釋前者：column-width不會決定分列數(shù)量，因?yàn)槎x上已經(jīng)規(guī)定了column-count是指定最大分列數(shù)量，然而當(dāng)分列布局容器放不下這么多子元素的時候，此時分列的數(shù)量很可能超過column-width設(shè)定的值。解釋后者：在一定程度上也影響了分列的數(shù)量，因?yàn)槲覀兊姆至胁季秩萜鞑⒉粫兇螅援?dāng)我們顯式設(shè)置了column-count的話，我們的分列布局容器里面最多也就放著column-count個列，由于這些情況，這個時候我們的count-width，count-gap被瀏覽器自己計(jì)算出來，所以在一定程度上也決定了最后會分多少列。
上述第二種情況是會很少遇到的，畢竟當(dāng)我們布局時，一般只會限定寬度，而高度不會被限制。下面看一個例子：
.wrapper{
width: 450px;
height: 100px;
background-color: #555;
margin-left: auto; margin-right: auto; margin-top: 50px;
border: 2px solid red;
column-count: 5;
}
3.column-gap
column-gap用來設(shè)置列與列之間的間距。它可取的值有兩個：normal,。當(dāng)我們設(shè)定它的值為normal時，這意味著我們將靠瀏覽器決定列間距是多少。
4.column-rule
column-rule用來定義列與列之間的邊框?qū)挾龋吙驑邮胶瓦吙蝾伾＞拖喈?dāng)于我們的border屬性一樣，不過column-rule不占用任何空間位置！！！。column-rule也可以拆分為下面幾個屬性：column-rule-width，column-rule-style，column-rule-color。列邊框不占用任何空間，列邊框出現(xiàn)在列間距上，所以如果我們的列邊框的寬度如果大于列間距的話，那么將使得列邊框直接消失。
5.column-span
column-span指定了該列是否跨列展示。它有兩個值可以選，分別是none：表示不跨任何列；all：表示跨越所有列。需要注意的地方，column-span應(yīng)用在列元素上。而非多列布局容器上。
6.column-fill
它指定了該列是否具有相同的高度。該屬性支持較差。兩個值可選，分別為：auto，balance（對齊）。
最后附上一個使用多列布局的例子：
多列布局demo
END
