Web前端入门第 48 问：纯 CSS 使用 column 属性实现瀑布流布局
什么是瀑布流？看一张图，以下图片来源于花瓣网截图：
如上图所示，瀑布流就是让内容按列显示，自动填充空白。
使用 column 实现瀑布流
源码：
效果：
视口宽度大于 1200px 时，显示 5 列：
视口宽度在 600px-800px 之间时，显示 3 列：
column 相关属性
column-count
column-count 声明显示多少列。默认值为 auto，由浏览器自己决定。
column-fill
column-fill 控制元素内容分成列时的平衡方式。有效值：auto（按顺序填充列）、balance（仅最后一页内容平均分配到各列）、balance-all（全部分页内容平均分配到各列）。
column-gap
column-gap 设置列间隔。默认值 normal 表示列间距占用 1em 宽度。
column-rule
column-rule 简写属性，包含 column-rule-width、column-rule-style 和 column-rule-color 。
column-rule-width 设置线条宽度。
column-rule-style 与 border-style 一样，支持值：none 、 hidden 、 dotted 、 dashed 、 solid 、 double 、 groove 、 ridge 、 inset 、 outset。
column-rule-color 设置线条颜色。
column-span
column-span 设置子元素是否跨列显示。有效值：none（不跨列）、all（跨列）。
column-width
column-width 设置列的宽度。浏览器会自动调整宽度大小，如果设置的宽度连两列都放不下，会自动变为一列显示（如图三）。
columns
columns 简写属性，可组合设置 column-width 和 column-count 属性。
grid 实现瀑布流
源码：
效果：
写在最后
在多列布局方面 column 属性相比于 flex 和 grid 而言，显得更有优势。
虽说 grid 也能做出瀑布流效果，不过需要指定每个网格单元的占用大小。
column 虽然不用控制每个子项的大小，但它的子元素排列顺序是从上到下排列，并不是从左往右，这种情况如果数据存在分页加载时候，就会出现内容重新排列导致内容闪动。
在瀑布流布局这个需求场景下，CSS 多多少少还是有点弱鸡~~必要时候还是只有祭出 JS 。
其他相关资料：
break-* 控制多列布局如何中断换列： https://developer.mozilla.org/zh-CN/docs/Web/CSS/break-inside
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]