css3新特性--CSS Multi-column Layout Module这个规范描述了多列（multi-colum

摘要

这个规范描述了多列（multi-column）布局在CSS样式表语言。使用功能规范中描述,可以使内容以多列（multi-column），夹杂间隙（gap）和标尺（rule）布局在页面上。

column-width & column-count & columns

当一个元素的 column-width 或 column-count 不为 auto 时，会采用多列布局。

columns 是 column-width 和 column-count 的复合属性。

{	
  /* 多列的宽度 */
  column-width: 200px;
  /* 多列的列数 */
  column-count: 2;
  
  /* column-width: 12em; column-count: auto */
  columns: 12em;  
  /* column-width: 12em; column-count: auto */
  columns: auto 12em; 
  /* column-width: auto; column-count: 2 */
  columns: 2;     
  /* column-width: auto; column-count: 2 */
  columns: 2 auto;  
  /* column-width: auto; column-count: auto */
  columns: auto;  
  /* column-width: auto; column-count: auto */
  columns: auto auto; 
}

Pseudo-algorithm 伪算法

元素是采用的 column-count (N) 还是 column-width (W) 决定多列布局，会按照下面的伪算法来决定，U 代表元素的宽度：

(01)  if ((column-width = auto) and (column-count = auto)) then
(02)      exit; /* not a multicol container */
(03)  if column-width = auto then
(04)      N := column-count
(05)  else if column-count = auto then
(06)      N := max(1,
(07)        floor((U + column-gap)/(column-width + column-gap)))
(08)  else
(09)      N := min(column-count, max(1,
(10)        floor((U + column-gap)/(column-width + column-gap))))
And:

(11)  W := max(0, ((U + column-gap)/N - column-gap))

按照为上述的伪算法，如果 column-count (N) 和 column-width (W) 都设定了，会先用column-width (W) 和 元素宽度 (U) 计算出 column-count (N),比对得到较小的 column-count (N) , 最后用 column-count (N),计算出 column-width (W)。

Stacking context 堆叠上下文

多列容器中所有的列都处于同一个堆叠上下文(stacking context)中，并且不会建立新的堆叠上下文(stacking context)。

column-gap

用于描述列与列之间的间隙，会影响多列的布局。

{
  /* 初始值是 normal ，通常是 1em */
  column-gap: normal;
  /* 指定宽度 */
  column-gap: 20px;
}

column-rule

类似于border，有 column-rule-width, column-rule-style 和 column-rule-color 3个子属性组成，不会影响多列布局，以gap中心为中心。

{
  column-gap: 0;
  column-rule-width: 20px;
  column-rule-style: solid;
  column-rule-color: antiquewhite;
}

Column-fill

用于描述多列内容是如何填充的。

{
  /* 默认值, 使所有列的内容平衡 */
  column-fill: balance;
  /* 未实现, 规范里提到了 fragmented contexts， 不知道什么意思 */
  column-fill: balance-all;
  /* 从前到后一次填充 */
  column-fill: auto;
}

Column-span

用于描述元素是否跨越多列。

{
  /* 默认值，不跨越  */
  column-span: none;
  /* 默认值，跨越多列  */
  column-span: all;
}

如果 column-span: all 被元素包裹，元素的margin、padding、border会出现在h2之前，例如下面

<style>
  section {
    border: 2px solid red;
    margin-top: 3em;
    padding-top: 2em;
  }

  h2 {
    column-span: all;
    height: 40px;
    background: aqua;
    margin: 20px;
  }
</style>
<body>
  <p>...</p>
  <section>
    <h2>An h2 element</h2>
    <p>...</p>
  </section>
</body>

css3新特性--CSS Multi-column Layout Module

摘要