冷门又好用的 CSS 特性

转载：
冷门又好用的 CSS 特性
https://segmentfault.com/a/1190000041209570

 
1. 多列布局（Multi-column Layout）

MDN - CSS Multi-column Layout
Can I Use - CSS3 Multi-column Layout

CSS 提供了对多列布局的支持。支持设置布局中的列数 (column-count)、内容应如何列之间的流动规则、列之间的间距 (column-gap) 以及列分割线（column-rule）的样式。
比如可以实现下面的瀑布流效果：

 

Codepen demo点击预览
主要样式：
.masonry {
width: 1440px;
margin: 20px auto;
columns: 4;
column-gap: 30px;

.item {
width: 100%;
break-inside: avoid;
margin-bo

冷门又好用的 CSS 特性最先出现在Python成神之路。