CSS3魔法堂：說說Multi-column Layout

前言

 是否記得《讀者文摘》中那一篇篇優美感人的文章呢？那除了文章內容外，還記得那報刊、雜誌獨有的多欄佈局嗎？
 當咱們但願將報刊、雜誌中的閱讀體驗遷移到網頁上時，最簡單直接的方式就是採用多欄佈局來對內容排版，然而在過去咱們僅能經過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。
注意：

1. multicol會生成新的BFC，所以不會出現collapsing margins效果。

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

1. multicol下的子元素被分配到column box中進行排版，若column box不足以容納某個子元素，則將子元素拆解成N個部分並分配到N個column box中;

2. column box沿multicol的inline direction排列;

3. column box的數目是根據column-width、column-count屬性值，和multicol的content box的inline dimension上的長度度計算而來的;

4. 同一個multicol下的全部column box的寬度都是同樣的，當column-fill:balance時高度均等於mluticol在block dimension上的長度;

5. 子元素所屬的containing block再也不是multicol的content box，而是該元素位於的column box;(所以如width:100%和float:left均是以column box爲參考系)

6. 若內容超出column box在inline dimension的長度時，則會被隱藏;(視覺上就是內容恰好在column gap前被截取了)

7. 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的其中一種而已。下面咱們簡單梳理一下！參考

1. block dimension與inline dimension相互垂直；

2. writing mode爲水平方向時，inline dimension與horizontal dimension一致；writing mode爲垂直方向時，inline dimension與vertical dimension一致；

3. 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爲右;

4. 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>
 設置每欄的寬度

1. 若column-count屬性值爲auto，則column-count=父容器寬度/column-width;

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

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

1. 若column-width屬性值爲auto，則不管父容器寬度是多少，依然保持固定的欄目數；

2. 若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
 做用：設置欄高是相等，仍是根據自身內容而定。

7.在默認狀況下，當column沒有足夠的空間容納整個子元素時，則會對子元素進行拆解(如同line box中的inline-level box同樣)。而CSS3中還提供了break-before/after/inside3個屬性來調整拆解方式。
break-before:auto|always|avoid|left|right|page|column|avoid-page|avoid-column
break-after:auto|always|avoid|left|right|page|column|avoid-page|avoid-column
break-inside:auto|avoid|avoid-page|avoid-column
針對screen媒介的屬性值
auto, 不強制也不由止在盒子前/後/內發生網頁/欄目拆解;
always/column, 強制在盒子前/後發生網頁/欄目拆解;
avoid/avoid-column, 禁止在盒子前/後/內發生網頁/欄目拆解;
針對打印的屬性值
left/right/page/avoid-page

<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

感謝

CSS3 Multi-column Layout
Columns
http://caniuse.com/#search=column《CSS 3實戰》——第6章 CSS 3多列布局《圖解CSS3核心技術與案例實戰》——第9章 CSS3 多列布局