多列布局

简介

支持在布局中建立列（column）的数量，以及内容如何在列之间流动（flow），列之间的间距（gap）大小，以及列的分隔线（column rules）

属性

• column-count
  指定列的数量

num: 正整数，表示列数量
auto: 表示列数量由其他CSS属性决定，例如column-width
inherit: 表示继承父元素的列数量

• column-gap
  指定列间间隔， 设置值可以为nomal，百分比，绝对单位

• column-fill
  指定如何填充列

balance: 表示列长短平衡
auto:列顺序填充，将会有不同的长度

• column-rule-width | column-rule-style | column-rule-color | column-rule
  指定列之间的直线样式，前三者分别为宽度，样式，颜色，column-rule是前三者的合并简写

• column-span
  指定某个元素跨越多少列，设置值可以为num，表示多少列；也可以是all，表示所有列

• column-width
  指定列的宽度，可以为绝对单位，也可以是auto由浏览器决定列的宽度

• collumns
  是column-width和column-count的合并简写，columns: column-width column-count;

瀑布流

/*父元素*/
column-count: 2;
column-gap: 10px;
/*子元素*/
break-inside: avoid;

• break-inside
  描述在多列布局下的内容盒子如何中断（中断就是宽度或高度不够时，应该如何处理多出部分，默认情况下是中断盒子），如果多列布局中没有内容盒子则不生效。

auto（默认值）：允许在主框中插入任何中断（页、列或区域）
avoid: 避免在主框中插入任何中断
avoid-page：避免主框中任何页的中断点
avoid-column： 避免主框中任何列的中断点
avoid-region避免原则框内的任何区域中断

参考

MDN：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/break-inside
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout
菜鸟教程：
https://www.runoob.com/css3/css3-multiple-columns.html
腾讯云：
https://cloud.tencent.com/developer/section/1072070