摘要：注意會生成新的，因此不會出現效果。圖中藍色線框，位于內，作為間的分隔線。不可否認求學之路的艱辛苦悶。如此的努力，為了僅僅是能在大學逍遙快活一番這動機實在讓人心寒，也正因如此造就了大學生的墮落。人類文明進步最有力的證明。

?是否記得《讀者文摘》中那一篇篇優美感人的文章呢？那除了文章內容外，還記得那報刊、雜志獨有的多欄布局嗎？
?當我們希望將報刊、雜志中的閱讀體驗遷移到網頁上時，最簡單直接的方式就是采用多欄布局來對內容排版，然而在過去我們僅能通過float+positioned來模擬多欄布局，而且效果不盡人意。而CSS3引入新的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為下，否則相反。

  
  

    
夢開始的地方
    
核心提示：十年寒窗無人問，一舉成名天下知。不可否認求學之路的艱辛苦悶。但這似乎也阻止不了那些為上大學而晝夜奮戰的莘莘學子。如此的努力，為了僅僅是能在大學“逍遙快活一番”這動機實在讓人心寒，也正因如此造就了大學生的墮落。電腦，科技革命的產物。人類文明進步最有力的證明。這也成為了大學生必不可少的裝備之一，但大多數...
十年寒窗無人問，一舉成名天下知。不可否認求學之路的艱辛苦悶。但這似乎也阻止不了那些為上大學而晝夜奮戰的莘莘學子。如此的努力，為了僅僅是能在大學“逍遙快活一番”這動機實在讓人心寒，也正因如此造就了大學生的墮落。
  

1.column-width:auto|
?設置每欄的寬度

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

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

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

若column-width屬性值為auto，則無論父容器寬度是多少，依然保持固定的欄目數；

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

column: ||

3.column-gap:normal|
?作用：設置欄之間的間距，normal的結果值一般為1em。
4.column-rule:||