× 目錄 [1]列寬 [2]列數 [3]列間距[4]列rule[5]跨列[6]列填充[7]多列 前面的話 CSS新增了多列佈局特性，可以讓瀏覽器確定何時結束一列和開始下一列，無需任何額外的標記。簡單來說，就是CSS3多列佈局可以自動將內容按指定的列數排列，這種特性實現的佈局效果和報紙、雜誌類排版非常 ...
×
目錄
[1]列寬 [2]列數 [3]列間距[4]列rule[5]跨列[6]列填充[7]多列前面的話
CSS新增了多列佈局特性，可以讓瀏覽器確定何時結束一列和開始下一列，無需任何額外的標記。簡單來說，就是CSS3多列佈局可以自動將內容按指定的列數排列，這種特性實現的佈局效果和報紙、雜誌類排版非常相似。本文將詳細介紹CSS多列佈局的基本屬性和用法
列寬
column-width主要用於給元素指定最優的列寬度，實際列寬可能會更寬或更窄。如果不設置高度，文字將自動撐滿整列，且最後一列的標點會溢出到容器外
[註意]IE10+和chrome瀏覽器支持標準寫法，而firefox、safari瀏覽器及移動端android、IOS需要添加首碼
column-width
值: auto | <length>
初始值: auto
應用於: block、inline-block、table-cell(firefox不支持為table-cell設置該屬性)
繼承性: 無
[註意]column-width不可為0和負值；當column-width的值為auto或column-width的值大於元素寬度width一半時，沒有分列效果(更準確地，由其他屬性來決定)
列數
column-count主要用於給元素指定允許的最大列數
[註意]IE10+和chrome瀏覽器支持標準寫法，而firefox、safari瀏覽器及移動端android、IOS需要添加首碼
column-count
值: auto | <length>
初始值: auto
應用於: block、inline-block、table-cell(firefox不支持為table-cell設置該屬性)
繼承性: 無
[註意]column-count不可為0和負值；當column-count的值為auto時，預設沒有分列效果(更準確地，由其他屬性來決定)
列間距
列間距column-gap用於定義相鄰兩列之間的空白間距
[註意]IE10+和chrome瀏覽器支持標準寫法，而firefox、safari瀏覽器及移動端android、IOS需要添加首碼
column-gap
值: normal | <length>
初始值: normal
應用於: block、inline-block、table-cell
繼承性: 無
[註意]column-gap的normal值預設情況下相當於1em。column-gap值不可為負值
列rule
該屬性用於繪製位於列間距水平中心的線條。該樣式由column-rule-width、column-rule-style、column-rule-color這三條樣式組成
[註意]IE10+和chrome瀏覽器支持標準寫法，而firefox、safari瀏覽器及移動端android、IOS需要添加首碼
column-rule
值: <column-rule-width> || <column-rule-style> || <column-rule-color>
標準中說column-rule類似於border，但實際更類似於outline，因為該樣式並不占據實際的物理尺寸。outline詳細情況移步至此
[註意]如果column-rule-width的寬度大於column-gap的寬度，則可能會顯示在列框內容中
跨列
column-span屬性用來定義子元素是否跨列
[註意]firefox不支持該屬性，IE10+和chrome瀏覽器支持標準寫法，而safari瀏覽器及移動端android、IOS需要添加首碼
column-span
值: none | all
初始值: none
應用於: block元素、table-cell元素(只有safari支持為table-cell設置該屬性)
繼承性: 無
none: 預設不跨列
all: 跨越所有列
[註意]當跨列元素被絕對定位(包括固定定位)或浮動後，跨列將不生效
[註意]當跨列元素與column-rule的修飾線重疊時，在IE和safari中，跨列元素將覆蓋修飾線，而chrome瀏覽器存在bug，跨列元素的文本覆蓋修飾線，但跨列元素的背景可能會消失。
列填充
在列佈局中，有時由於內容不足，多列中的最後列往往沒有足夠內容填充，這時要實現所有列都具有相同高度的效果，需要使用列填充屬性column-fill
column-fill
值: auto | balance
初始值: auto
應用於: block、inline-block
繼承性: 無
auto: 預設各列高度隨內容變化而變化
balance: 各列高度根據內容最多的一列進行統一
[註意]目前只有firefox支持帶首碼的column-fill屬性
多列
一般地，我們只關心是否分列以及列寬多少，對列間距並不考慮。於是，column這個column-width和column-count的複合屬性就得到了比較廣泛的使用
columns: column-width || column-count
[註意]由於column-width和column-count這兩個值的單位不同，所以順序無關
要知道，多列佈局主要由列寬、列間距、列數及元素寬度影響，其佈局等式是
元素寬度 = 列數 * 列寬 + (列數-1)*列間距 <=> 列數*(列寬+列間距) - 列間距 = 元素寬度
或者， 列數 = (元素寬度+列間距)/(列寬+列間距)
或者， 列寬 = (元素寬度+列間距)/列數 - 列間距
此等式中，列間距為定值，其他三個值為可變值，以下是各個值推算情況，其中N為實際列數，W為實際列寬
【1】如果元素寬度為auto，且列寬和列數都不是auto
則 N = column-count W = column-width;
【2】如果列寬為auto，但列數不是auto，元素寬度不為auto
則 N = column-count W = max(0,(元素寬度 - ((N-1)*列間距))/N)
【3】如果列寬不為auto，但列數是auto，元素寬度不為auto
則 N = max(1,floor((元素寬度 + 列間距) / (列寬 + 列間距 )) W = ((元素寬度 + 列間距) / N) - 列間距
【4】如果列寬和列數都不是auto，元素寬度不為auto
則 N = min(列寬 , floor((元素寬度 + 列間距) / (列寬 + 列間距))) W = ((元素寬度 + 列間距) / N) - 列間距
[註意]若列數為小數，只保留整數部分
[註意]所有的情況都是先推算出實際列數，再由實際列數推算實際列寬
