需求场景
在网页展示图片时，会出现一种情况，图片的排列并非是完全对称规则排序的，而是根据不同图片的大小，又打占位空间较大，有的较小，呈现出类似瀑布一般顺接的排列方式，这种排列更为自由且能突出不同图片的尺寸对比。
多列属性
| 属性 | 示例说明 |
|---|---|
column-count:3; | 元素被划分为3列，适用于：除table之外的非替换块级元素，table-cell，inline-block 元素 |
column-gap:20px; | 列间隔20px |
column-rule:3px solid red; | 列间间隔线样式（column-rule-width/style/color），类似border |
column-fill:balance; | 协调均衡每列分布。浏览器应对列长度的差异进行最小化处理（每列如何填充）balance/auto |
column-span:all; | all，横跨所有列；1/none，不横跨 |
columns:200px; | 列宽：200px；columns 属性是一个简写属性，用于设置列宽或列数，设置了列宽，则自动分配列数，若设置了列数，则自动分配列宽。 |
break属性
-
break-inside
- 属性规定元素内部分页（page-break）、分列（column-break）或分区（region-break），通过使用 break-inside，可以让图像、代码片段、表格以及列表内部避免中断
- break-inside 属性扩展了 CSS2 的 page-break-inside 属性 值 | 描述 | | ------------ | ----------------------------------------------------------------------------------------------- | | auto | 默认。在元素内自动进行分页、分列、分区。 | | avoid | 避免在元素内出现页、列、区域中断。 | | avoid-column | 避免在元素内分列。 | | avoid-page | 避免在元素内分页。 | | avoid-region | 避免在元素内分区。 | | initial | 将此属性设置为其默认值。参阅 initial。 | | inherit | 从其父元素继承此属性。参阅 inherit。 |
-
break-before/break-after
- break-before/break-after 属性规定在指定元素之前/之后是否应发生分页（page-break）、分列（column-break）或分区（region-break），通过使用 break-before/break-after，可以在应用 break-before/break-after 属性的元素之前/之后，对页面、列或区域进行中断，或者避免将元素拆分并跨越两个页面
- break-before/break-after 属性扩展了 CSS2 的 page-break-before/page-break-after 属性。 值 | 描述 | | ------------ | ----------------------------------------------------------------------------------------------- | | auto | 默认。在元素之前/之后自动进行分页、分列、分区。 | | all | 始终在主体框之前/之后立即插入分页符。 | | always | 始终在元素之前/之后插入分页符（page-break）。 | | avoid | 避免在元素之前/之后出现页、列、区域中断。 | | avoid-column | 避免在元素之前/之后分列。 | | avoid-page | 避免在元素之前/之后分页。 | | avoid-region | 避免在元素之前/之后分区。 | | column | 始终在元素之前/之后插入分列符。 | | left | 在元素之前/之后插入一个或两个分页符，以便将下/上一页格式化为左页。 | | page | 始终在元素之前/之后插入分页符。 | | recto | 在主体框之前/之后插入一个或两个分页符，以便将下/上一页格式化为 recto 页。 | | region | 始终在元素之前/之后插入分区符。 | | right | 在元素之前/之后插入一个或两个分页符，以便将下/上一页格式化为右页。 | | verso | 在主体框之前/之后插入一个或两个分页符，以便将下/上一页格式化为 verso 页。 | | initial | 将此属性设置为其默认值。参阅 initial。 | | inherit | 从其父元素继承此属性。参阅 inherit。
多列实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<title>Document</title>
<style>
.main_page{
/* height: 400px; */
column-count:7; /* 划分7列 */
column-gap: 15px; /* 每列间隔15px */
column-fill: balance; /* 协调均分每列内容 */
}
.main_page>h3{
column-span: all; /* 横跨多列 */
text-align: center;
}
.main_page div{
break-inside: avoid; /*避免元素内出现列中断*/
}
.main_page img{
width: 100%;
margin: 15px 0;
}
.main_page span{
display: block;
margin: 15px 0;
}
.main_text{
columns: 500px; /* 设置列宽 */
column-rule:1px dashed orangered ; /* 列间间隔线样式 */
text-align: justify;
}
.main_text h3{
text-align: center;
}
</style>
</head>
<body>
<div class="main_page">
<h3>图片多列</h3>
<div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>批图详情预览</span></div>
<div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>批图详情预览</span></div>
<div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>批图详情预览</span></div>
<div><img src="./10bf209477.jpg" alt=""><span>批图详情预览</span></div>
<div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>批图详情预览</span></div>
<div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>批图详情预览</span></div>
<div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>批图详情预览</span></div>
<div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>批图详情预览</span></div>
<div><img src="./2a7a4d7a1d.jpg" alt=""><span>批图详情预览</span></div>
<div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>批图详情预览</span></div>
<div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>批图详情预览</span></div>
<div><img src="./3b99467c88.jpg" alt=""><span>批图详情预览</span></div>
<div><img src="./59e68e23a0.jpg" alt=""><span>批图详情预览</span></div>
<div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>批图详情预览</span></div>
<div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>批图详情预览</span></div>
<div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>批图详情预览</span></div>
<div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>批图详情预览</span></div>
</div>
<hr>
<div class="main_text">
<h3>文字多列</h3>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae cum enim architecto rerum eligendi hic quo asperiores! Odit placeat mollitia corrupti. Perspiciatis sint ipsa iusto, commodi facere modi quia dolorum?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint harum similique repellat! Distinctio, cum. Ducimus, quisquam. Consectetur adipisci sunt blanditiis nihil eos est, ullam, assumenda minus eum praesentium quasi cum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure cupiditate excepturi saepe obcaecati ad labore quae animi? Alias quos qui eum quia nemo corrupti tempora error cumque dolor facilis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, assumenda nulla ut voluptate unde libero atque cumque praesentium consectetur ducimus quae neque, molestias facere, iusto in sequi recusandae id! Rem.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione, eligendi quibusdam a optio fuga exercitationem hic mollitia minus aliquam repudiandae nobis facere beatae nisi quia cupiditate in consectetur! Cumque, animi?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus laboriosam voluptas sapiente provident ipsam porro veritatis, adipisci quisquam odit, quibusdam repellat nam eaque maxime, esse totam! Velit quos similique amet.
</div>
</body>
</html>
文章如有纰漏，还请各位前辈指正，感谢Thanks♪(･ω･)ﾉ。
