css3屬性column知多少

CSS3 可以將常值內容設計成像報紙一樣的多欄版面配置。像下面這樣：

這樣的布局稱為“多欄版面配置”。

對多列屬性分別進行學習：

對於 column 的所有屬性，ie10+ 支援，firefox 不支援 column-span。除 firefox 外，所有瀏覽器都不支援 column-fill 屬性。

1. column-count: 需要分割的列數

    記得早先少年時，大家誠誠懇懇，說一句是一句；清早上火車站，長街黑暗無行人，賣豆漿的小店冒著熱氣；從前的日色變得慢，車、馬、郵件都慢，一生只夠愛一個人；從前的鎖也好看，鑰匙精美有樣子，你鎖了人家就懂了。

div {    -moz-column-count: 3;         column-count: 3;}

通過測試，firefox(version 49.0.1) 需要添加 -moz- 首碼，chrome，opera，safari，不需要添加 -webkit- 首碼也能正常顯示，ie10+，edge 不需要添加首碼能正常顯示。將頁面縮小後(不縮小時由於文本字數不夠，只顯示兩列)顯示效果：

2. column-gap: 列與列間的間隙

ie下預設為 16px，其它瀏覽器未明確給出。

    當我年輕的時候，我夢想改變這個世界；當我成熟以後，我發現我不能夠改變這個世界，我將目光縮短了些，決定只改變我的國家；當我進入暮年以後，我發現我不能夠改變我們的國家，我的最後願望僅僅是改變一下我的家庭，但是，這也不可能。當我現在躺在床上，行將就木時，我突然意識到：如果一開始我僅僅去改變我自己，然後，我可能改變我的家庭；在家人的協助和鼓勵下，我可能為國家做一些事情；然後，誰知道呢?我甚至可能改變這個世界。

div {    -moz-column-count: 4;         column-count: 4;    -moz-column-gap: 40px;         column-gap: 40px;         }

3. column-rule-width: 列與列間的邊框寬度

4. column-rule-style: 列與列間的邊框樣式

5. column-rule-color: 列與列間的邊框顏色

以上三個屬性可以簡寫為 column-rule。同 border 一樣，這三個屬性裡 width 和 color 可以省略其中之一或都省略，瀏覽器會使用預設的 width 和 color，但是 style 不能省略。在Google瀏覽器中做測試：

(1). 省略 width(chrome 預設為 3px, 其它瀏覽器未明確給出)

    這麼多年諮詢信看下來，讓我逐漸明白了一件事。很多時候，諮詢者心裡已經有了答案，來諮詢只是想確認自己的確定是對的。所以有些人讀過回信後，會再次來信，大概就是因為回答的內容和他們的想法不一樣吧。

div {    -moz-column-count: 4;         column-count: 4;    -moz-column-gap: 40px;         column-gap: 40px;    -moz-column-rule-style: solid;         column-rule-style: solid;    -moz-column-rule-color: #f00;         column-rule-color: #f00;}

(2). 省略 color(預設為 rbg(0,0,0))

div {    -moz-column-count: 4;         column-count: 4;    -moz-column-gap: 40px;         column-gap: 40px;    -moz-column-rule-width: 2px;         column-rule-width: 2px;    -moz-column-rule-style: solid;         column-rule-style: solid;}

(3). width 和 color 兩者都省略

div {    -moz-column-count: 4;         column-count: 4;    -moz-column-gap: 40px;         column-gap: 40px;    -moz-column-rule-style: dotted;         column-rule-style: dotted;}

6. column-span: 元素跨越列數(firefox 不支援)

可用值為 1 和 all，預設值為 1。Firefox瀏覽器不支援此屬性，但是當使用此屬性值時，變現效果和 column-span: 1; 一樣，因此可以放心的使用 column-span: 1; 不建議使用 column-span: all;

    
在情感的問題上，很多人都是傻瓜
他在感情上的愚鈍就像是門窗緊閉的屋子，雖然愛情的腳步正在緩緩向他走來，可他還是在屋子裡走過去又走過來，他也聽到了，可是他覺得那是幻想，是有人走錯了方向，她終究會明白過來，然後找對自己的方向繼續過自己該有的生活。然而聯絡著美好愛情的生活不單單這麼簡單，否則戀愛就沒有那麼美好，那麼令人嚮往了。他喜歡的是另外一個女孩，可是他僅僅向前邁了一小步，最終在院子裡徘徊，他覺得女孩走的是另外一條路，她邁著不一樣的步伐，很清晰自己的目標和價值所在，走得很快。當然他不止一次的做夢醒來希望女孩旁邊給他留了一條路，這樣他們就能攜手並進，在讓大家都變得更好的路上越走越遠，這是他最美好的期待。他依然在這件事情糾結著，直到女孩說：“傾盡所有，你會得到你想要的！”

div {    -moz-column-count: 4;         column-count: 4;}h2 {    -moz-column-span: 1;         column-span: 1;}

與其他屬性不同，column-span 是用在子項目上，表示跨越多少列，好像表格中 col-span 屬性一樣。因為用的值是 1，而不是 all，所以 firefox 瀏覽器中的顯示效果和其它瀏覽器一樣。

7. column-width: 列的寬度

我以前常常想：“朋友有很多，能成為朋友，必定是在生活習慣、愛好、脾氣、秉性、追求、對事物的看法、處事風格等一件事或多方面有共同點或相似之處，何其難得。可碰到自己每當安靜下來就想起的人，每當自己有空閑時就迫不及待想要去瞭解的人可遇而不可求。能在人海中相識並願意花時間想去走進一個人內心這樣的人，更應該努力去爭取。朋友失去了一個，你還有很多，可是你失去喜歡的人，就是你的大過！”

div {    -moz-column-count: 4;         column-count: 4;    -moz-column-width: 200px;         column-width: 200px;    }

這個屬性要求比較多：列數與寬度的乘積(column-count * column-width)應該要小於頁面的寬度，才能展示想要的四列效果。當文本字數比較少，頁面又比較寬時，就顯示不了四列，可能只有三列或更少。

8. column-fill: 如何填充列

這個屬性目前只有 firefox 支援，fill 翻譯為填充，所以 column-fill 是指定填充列的方式。有兩個值可用，balance，列長短平衡，瀏覽器應盡量減少改變列的長度。auto，列順序填充，他們將有不同的長度。

9. columns: 指定列的寬度和數量

這是一個合寫屬性，是 column-width 和 column-count 和合寫。

後來他在“我”的生活裡悄然離去之後，“我”常常會心酸地想起這個夏天早晨月台上的情景，“我”在他二十一歲的時候突然闖進他的生活，而且完全擠滿他的生活，他本來應有的幸福一點也擠不進來了。當他含辛茹苦把“我”養育成人，“我”卻不知不覺把他拋棄在月台上。人世間的親情像一杯咖啡，通過收養來建立的親情是一杯苦咖啡，打算喝咖啡的人走了，他知道有更好的咖啡等著他，後來這杯咖啡越來越苦。但我相信喝咖啡的人終究會回來的。

div {    -moz-columns: 150px 4;         columns: 150px 4;    }

這個合寫的屬性不是都滿足 width 和 count。針對本例我們撇開每一列之間的間距不談，假設每一列之間的間距為 0。那麼當文本的寬度不小於 600px 時，文本將始終顯示 4 列(至少確實想顯示 4 列，如果文本字數足夠的話就一定顯示 4 列)，就不能同時滿足於寬度也為 150px；當文本的寬度小於 600px 時，文本就顯示為 3 列，當文本寬度小於 300px 時，文本就顯示為 2 列。

本例中，對於元素可用寬度不同顯示的列數也不同。

顯示為 4 列：

顯示為 3 列：

顯示為 2 列：

顯示為 1 列：

總結：那麼這個合寫屬性就可以理解為(還是假設每列之間的間距為 0)：當元素可用寬度很小時，它只顯示 1 列；當元素的可用寬度不小於 count * 2 它就顯示 2 列；當元素的可用寬度不小於 count * 3 時，它就顯示 3 列；依此規則類推，至到元素的可用寬度不小於 count * width 時，就顯示為 width 列。

一些猜想：

在元素可用寬度確定的情況下，既設定 column-width， 又設定了 column-count 和 coiumn-gap 時，頁面該怎麼布局呢？

經過測試，基本可以得出以下結論：

1. 第九點中的總結在這裡依然有效；

2. 當元素的寬度能夠排下兩列及以上時(一列時，沒有間距)，column-gap 間距能始終被滿足。

