CSS多列布局

前面的話

 　　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) - 列間距

　　[注意]若列數爲小數，只保留整數部分

　　[注意]全部的狀況都是先推算出實際列數，再由實際列數推算實際列寬