CSS3提供了个新属性columns用于多列布局。在这之前，有些大家习以为常的排版，要用CSS动态实现其实是比较困难的。如竖版报纸
在我不知columns这属性之前，第一反应是：这有何难，多弄几个并列的div不就行了？但仔细想想确实很难实现，因为内容是动态的。搞几个div容易，但每个div内放多少文字呢？一篇文章该在哪行哪段剪切进不同的div内呢？你肯定不愿意为每一段文字，都在特定的地方插入div标签，那代码重用性太低了。而column属性完美的解决了这个问题，让浏览器来决定在文字该在哪里换列。你所做的只需指定每列的宽度和列数即可。
先来看看columns和它的子属性：
column-width
column-count
column-gap
column-rule
column-span
column-fill
column-width给列定义个最小的宽度。默认值为auto表示将根据column-count列的数量自动调整列宽。
column-count最大列数，不赘述。
通常上面两个参数都合并在columns中一起指定。例如columns: auto 4;就是上图的效果，会将div分成4列，并根据div的宽度640px，均分列宽为160px（其实不到160px，因为还有列间距）。代码如下：
.wrapper {
-moz-columns: auto 4;
-webkit-columns: auto 4;
columns: auto 4;
}
<div class="wrapper">...大段文字…</div>上述实现简单到有的过分，现在看看更灵活的用法。上例中外层div是定宽640px，因此通过计算后得到的列宽也是固定的。无论你如何缩放浏览器窗口大小，都固定4列。这样显得不够灵活。
如果想要根据窗口尺寸自适应，随着窗口拉窄，从4列逐渐变为1列，随着窗口拉宽，再从1列逐渐变为4列。首先你需要将外层div从定宽width: 640px;改成动态宽度width: 50%;。其次columns-width不能同时为auto，否则会根据div动态宽度得到列宽，仍旧固定为4列。所以columns-width需要为定值。效果可以点这里，并且拉伸浏览器窗口试试。
column-gap是列间距，默认值normal，相当于1em。需要注意的是，如果column-gap与column-width加起来大于总宽度的话，就无法显示column-count指定的列数，会被浏览器自动调整列数和列宽
column-rule用于设置列的边框，类似于border，区别是不占用任何空间，因此设了column-rule不会导致列宽的变化。另外如果边框宽度大于column-gap列间距，将不会显示边框。语法和border类似，例如column-rule: 1px solid #000;。效果见例子页面。
column-span用于跨列，默认值none表示不跨列，all表示跨越所有列。例如文章标题可以设成all来跨列。效果见例子页面
column-fill用于统一列高。默认值auto各列的高度随内容自动调整，balance所有列高都设为最高的列高
总结
columns属性最大的问题还是浏览器兼容性问题，参见Can I Use。而且竖版排列暂时用的地方不多，这个属性是否能流行闪光尚存疑问。如果内网有这方面的需求，用用还是极好的。
作者：张歆琳
链接：https://www.jianshu.com/p/87d1862f88c6
共同学习，写下你的评论
评论加载中...
作者其他优质文章
