CSS3提供了個(gè)新屬性columns用于多列布局敞掘。在這之前折柠，有些大家習(xí)以為常的排版章办，要用CSS動(dòng)態(tài)實(shí)現(xiàn)其實(shí)是比較困難的芒炼。如豎版報(bào)紙
在我不知columns這屬性之前瘫怜，第一反應(yīng)是：這有何難，多弄幾個(gè)并列的div不就行了本刽？但仔細(xì)想想確實(shí)很難實(shí)現(xiàn)鲸湃，因?yàn)閮?nèi)容是動(dòng)態(tài)的。搞幾個(gè)div容易子寓，但每個(gè)div內(nèi)放多少文字呢暗挑？一篇文章該在哪行哪段剪切進(jìn)不同的div內(nèi)呢？你肯定不愿意為每一段文字斜友，都在特定的地方插入div標(biāo)簽窿祥，那代碼重用性太低了。而column屬性完美的解決了這個(gè)問(wèn)題蝙寨，讓瀏覽器來(lái)決定在文字該在哪里換列晒衩。你所做的只需指定每列的寬度和列數(shù)即可。
先來(lái)看看columns和它的子屬性：
- column-width
- column-count
- column-gap
- column-rule
- column-span
- column-fill
column-width給列定義個(gè)最小的寬度墙歪。默認(rèn)值為auto表示將根據(jù)column-count列的數(shù)量自動(dòng)調(diào)整列寬听系。
column-count最大列數(shù)，不贅述虹菲。
通常上面兩個(gè)參數(shù)都合并在columns中一起指定靠胜。例如columns: auto 4;就是上圖的效果，會(huì)將div分成4列，并根據(jù)div的寬度640px浪漠，均分列寬為160px（其實(shí)不到160px陕习，因?yàn)檫€有列間距）。代碼如下：
.wrapper {
-moz-columns: auto 4;
-webkit-columns: auto 4;
columns: auto 4;
}
<div class="wrapper">...大段文字…</div>
上述實(shí)現(xiàn)簡(jiǎn)單到有的過(guò)分址愿，現(xiàn)在看看更靈活的用法该镣。上例中外層div是定寬640px，因此通過(guò)計(jì)算后得到的列寬也是固定的响谓。無(wú)論你如何縮放瀏覽器窗口大小损合，都固定4列。這樣顯得不夠靈活娘纷。
如果想要根據(jù)窗口尺寸自適應(yīng)嫁审，隨著窗口拉窄，從4列逐漸變?yōu)?列赖晶，隨著窗口拉寬律适，再?gòu)?列逐漸變?yōu)?列。首先你需要將外層div從定寬width: 640px;改成動(dòng)態(tài)寬度width: 50%;遏插。其次columns-width不能同時(shí)為auto擦耀，否則會(huì)根據(jù)div動(dòng)態(tài)寬度得到列寬，仍舊固定為4列涩堤。所以columns-width需要為定值眷蜓。效果可以點(diǎn)這里，并且拉伸瀏覽器窗口試試胎围。
column-gap是列間距吁系，默認(rèn)值normal，相當(dāng)于1em白魂。需要注意的是汽纤，如果column-gap與column-width加起來(lái)大于總寬度的話(huà)，就無(wú)法顯示column-count指定的列數(shù)福荸，會(huì)被瀏覽器自動(dòng)調(diào)整列數(shù)和列寬
column-rule用于設(shè)置列的邊框蕴坪，類(lèi)似于border，區(qū)別是不占用任何空間敬锐，因此設(shè)了column-rule不會(huì)導(dǎo)致列寬的變化背传。另外如果邊框?qū)挾却笥赾olumn-gap列間距，將不會(huì)顯示邊框台夺。語(yǔ)法和border類(lèi)似径玖，例如column-rule: 1px solid #000;。效果見(jiàn)例子頁(yè)面颤介。
column-span用于跨列梳星，默認(rèn)值none表示不跨列赞赖，all表示跨越所有列。例如文章標(biāo)題可以設(shè)成all來(lái)跨列冤灾。效果見(jiàn)例子頁(yè)面
column-fill用于統(tǒng)一列高前域。默認(rèn)值auto各列的高度隨內(nèi)容自動(dòng)調(diào)整，balance所有列高都設(shè)為最高的列高
總結(jié)
columns屬性最大的問(wèn)題還是瀏覽器兼容性問(wèn)題韵吨，參見(jiàn)Can I Use匿垄。而且豎版排列暫時(shí)用的地方不多，這個(gè)屬性是否能流行閃光尚存疑問(wèn)学赛。如果內(nèi)網(wǎng)有這方面的需求年堆，用用還是極好的吞杭。
