css3多列布局

css3多列布布局, 兼容性IE10+, 其他浏览器需要加前缀, 移动端兼容性较好, 不过都只支持部分属性.

下面分享一些自己的经验

  • column-count 有时会失效
    比如父元素下4(偶数)个子元素, column-count为3(奇数), 则很可能只显示两列, 可以设置一下子元素的margin-top/margin-bottom或border, 算是一种hack吧, 至于原因我也说上不来了

  • column-width + column-gap
    这两个属性放到一起, 可以作为column-count的代替品, 即不设置column-count的情况下, 也可以实现多列

  • 列的顺序
    列的顺序是 从上到下, 从左到右的, 而不是 从左到右, 从上到下. 看下面的例子就知道我是啥意思
    这个顺序比较反常识, 起码我看得不是很舒服. 因此对顺序有要求时, 使用多列布局时要谨慎

  • column-span
    可以实现跨列, 它的值只有 none 与 all. 也即它一跨就跨所有的列, 而不能像table一样, 指定只跨几列
    在Chrome下, 跨列会打破默认的列的排序, 不过在Firefox却不会, 也即这个表现有因浏览器而异, 不能过分依赖.

下面是codepen里的代码

See the Pen column by levy (@levy9527) on CodePen.


另, 不支持的属性有:

  • break-inside
  • break-before
  • break-after

虽说加了-webkit-column前缀可以在Chrome55下找到这些属性, 但改变它们的值, 界面并无变化.

还有, 属性column-fill: [balance | auto ], 也是这样. 不知是否是我测试方法不对.

Fork me on GitHub