css columns 多栏布局

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Columns

column-count

元素的列数

column-count: 3;
column-count: auto;

column-count: inherit;
column-count: initial;
column-count: unset;

column-width

列宽

/* Keyword value */
column-width: auto;

/* Different <length> values */
column-width: 6px;
column-width: 25em;
column-width: 0.3vw;

/* Global values */
column-width: inherit;
column-width: initial;
column-width: unset;

columns

是column-count和column-width的简写形式

columns: 1em;/*column-width列的长度值*/
columns: 1;/*column-count列数*/
columns: auto;
columns: 1 auto;
columns: auto 12em;
columns: auto auto;

column-gap

设置列之间的间隔

column-gap: 3px;
column-gap: 2.5em;
column-gap: normal;

column-gap: inherit;

column-fill

定义如何填充列

column-fill: auto; //按顺序填充列，高度可能不同
column-fill: balance; //对列进行协调，高度差异最小化

/* Global values */
column-fill: inherit;
column-fill: initial;
column-fill: unset;

column-span

一个内容元素是否跨越多行，初始值为none

column-span: none;
column-span: all;

column-span: inherit;

column-rule，column-rule-width，column-rule-style，column-rule-color

column-rule是column-rule-width，column-rule-style，column-rule-color的简写形式，用来指定列之间的分割线的样式，分别是线的宽度，样式和颜色。

column-rule: dotted;
column-rule: solid blue;
column-rule: solid 8px;
column-rule: thick inset blue;

break-after，break-before，break-inside

这三个属性用来控制列布局的时候，列中元素的中断行为。break-after和break-before用来给元素的前面或者后面添加中断，而break-inside用来阻止元素中断，这样可以避免元素内容跨列显示。

break-after: auto;
break-after: always;
break-after: left;
break-after: right;
break-after: recto;
break-after: verso;
break-after: page;
break-after: column;
break-after: region;
break-after: avoid;
break-after: avoid-page;
break-after: avoid-column;
break-after: avoid-region;


/* Generic break values */
break-before: auto;
break-before: avoid;

/* Page break values */
break-before: avoid-page;
break-before: page;
break-before: always;
break-before: left;
break-before: right;
break-before: recto;
break-before: verso;

/* Column break values */
break-before: avoid-column;
break-before: column;

/* Region break values */
break-before: avoid-region;
break-before: region;


break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;