多列布局

梦里梦外; 2023-01-03 04:44 148阅读 0赞

## 简介 ##

支持在布局中建立列（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