CSS3魔法堂：說說Multi-column Layout - fsjohnhuang－IT工程師數位筆記本

文章出處

前言

是否記得《讀者文摘》中那一篇篇優美感人的文章呢？那除了文章內容外，還記得那報刊、雜志獨有的多欄布局嗎？
當我們希望將報刊、雜志中的閱讀體驗遷移到網頁上時，最簡單直接的方式就是采用多欄布局來對內容排版，然而在過去我們僅能通過float+positioned來模擬多欄布局，而且效果不盡人意。而CSS3引入新的Multi-column Layout模型，從底層支持多欄布局。
文本作為學習筆記，以便日后查閱。

通欄布局與多欄布局

在深入Multi-column Layout模型之前，我們先看看療效吧。

通欄布局

大家在網上瀏覽的新聞、博客等一般采用的是通欄布局，效果如同當前本篇博客一樣，就是所有內容均集中在一列中排版。若將這種布局方式運用在報刊、雜志上那只能一個字來形容，那就是丑了。

多欄布局

感覺是不是猶如在讀紙質的雜志呢:)

深入Multi-column Layout模型

模型組成

multi-column element(abbr. multicol):圖中白色線框，column-width或column-count屬性值不為auto時，該元素則作為multicol并為其子元素提供multi-column layout。
注意：

multicol會生成新的BFC，因此不會出現collapsing margins效果。

column box(abbr. column):圖中紅色線框，如同line box一樣用于組織multicol中的各子元素。具體特性如下

multicol下的子元素被分配到column box中進行排版，若column box不足以容納某個子元素，則將子元素拆解成N個部分并分配到N個column box中;
column box沿multicol的inline direction排列;
column box的數目是根據column-width、column-count屬性值，和multicol的content box的inline dimension上的長度度計算而來的;
同一個multicol下的所有column box的寬度都是一樣的，當column-fill:balance時高度均等于mluticol在block dimension上的長度;
子元素所屬的containing block不再是multicol的content box，而是該元素位于的column box;(因此如width:100%和float:left均是以column box為參考系)
若內容超出column box在inline dimension的長度時，則會被隱藏;(視覺上就是內容剛好在column gap前被截取了)
absolute positioned元素不參與multi-column layout.

column gap:圖中粉色線框，位于column box之間。
column rule:圖中藍色線框，位于column gap內，作為column box間的分隔線。

注意上述內容有幾個相對陌生的概念——inline direction、block direction、inline dimension、block dimension，其實就是對應我們默認情況下的"從左至右"、"從上到下"、"水平方向"和"垂直方向"。那為何不用后者來描述呢？原因就是后者是一種"合理誤解"的描述方式，"從左至右"只是inline direction的其中一種而已。下面我們簡單梳理一下！參考

block dimension與inline dimension相互垂直；
writing mode為水平方向時，inline dimension與horizontal dimension一致；writing mode為垂直方向時，inline dimension與vertical dimension一致；
block direction其實是Flow-relative Direction下的block flow direction,我們要從關注"上下"轉移到關注block-start和block-end，沿block direction排列實際上就是從block-start到block-end排列。當writing-mode為horizontal-tb時，block-start為上，block-end為下;當writing-mode為vertical-rl時，block-start為右，block-end為左;當writing-mode為vertical-lr時，block-start為左，block-end為右;

inline direction其實是Flow-relative Direction下的inline base direction,我們要從關注"左右"轉移到關注line-start和line-end，沿inline direction排列實際上就是從line-start到line-end排列。當writing-mode含horizontal關鍵詞時，且direction為ltr，則line-start為左，line-end為右，否則相反；若writing-mode含vertical關鍵詞時，且direction為ltr，則line-start為上，line-end為下，否則相反。

  <style type="text/css">
.container{
  width: 300px;
  height: 500px;
  padding: 5px;
  border: dashed 1px #888;

  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.3em;
  -webkit-writing-mode: vertical-rl;
  text-align: justify;

  -webkit-columns: auto 2;
  -webkit-column-gap: 1.5em;
}
.container h1{
  background: #eee;
  text-align: center;
}
.container p{
  text-indent: 2em;
}
  </style>
  <div class="container">
<h1>夢開始的地方</h1>
<p>核心提示：十年寒窗無人問，一舉成名天下知。不可否認求學之路的艱辛苦悶。但這似乎也阻止不了那些為上大學而晝夜奮戰的莘莘學子。如此的努力，為了僅僅是能在大學“逍遙快活一番”這動機實在讓人心寒，也正因如此造就了大學生的墮落。電腦，科技革命的產物。人類文明進步最有力的證明。這也成為了大學生必不可少的裝備之一，但大多數...</p>
<p>十年寒窗無人問，一舉成名天下知。不可否認求學之路的艱辛苦悶。但這似乎也阻止不了那些為上大學而晝夜奮戰的莘莘學子。如此的努力，為了僅僅是能在大學“逍遙快活一番”這動機實在讓人心寒，也正因如此造就了大學生的墮落。</p>
  </div>

CSS屬性詳解

1.column-width:auto|<length>
設置每欄的寬度

若column-count屬性值為auto，則column-count=父容器寬度/column-width;
若column-count屬性值不為auto，則該設置為每欄的最小寬度，并根據父容器寬度，調整顯示的欄目數目。(注意：當column-width*column-count < 父容器寬度時，column-width將自動擴大)

2.column-count:auto|<integer>
作用：設置欄目數量

若column-width屬性值為auto，則無論父容器寬度是多少，依然保持固定的欄目數；
若column-width屬性值不為auto，則該設置為欄目的最大數量，并根據父容器寬度，調整顯示的欄目數目。(注意：當column-width*column-count < 父容器寬度時，column-width將自動擴大)

column:<column-width> || <column-count>

3.column-gap:normal|<length>
作用：設置欄之間的間距，normal的結果值一般為1em。
4.column-rule:<length>||<style>||<color>||<transparent>
作用：設置欄之間邊框的寬度、樣式和顏色。
子屬性column-rule-width:<lenght>
子屬性column-rule-style:<border-style>
子屬性column-rule-color:<color>
5.column-span:1|all
作用：設置某子元素跨1欄還是跨所有欄。
6.column-fill:balance|auto
作用：設置欄高是相等，還是根據自身內容而定。

<p style="-webkit-column-break-inside:avoid;">核心提示：十年寒窗.....</p>

兼容——無法抹去de痛

Multi-column Layout的各個屬性在不同的瀏覽器中的支持程度也有所區別，但就columns屬性的支持如下：

-webkit-columns
-moz-columns
columns

總結

由于兼容性問題，我們并不能很好地享受Multi-column Layout的美好，幸運的是模擬報刊多欄布局的場景并不多見，而且用戶通過網頁閱讀時已習慣通欄布局，因此不是非用不可啦！
尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/5412841.html^_^肥仔John