使用column-count属性做瀑布流布局_column-count瀑布流

需要注意的问题
1、column-count设为2， 但是出现了横向滚动调，问题原因：限制了高度，去掉高度即可
2、左边最后一列一部分内容跑到右边去了，原因：未加 break-inside: avoid;
3、子元素不要加宽度

css代码

.parent {
	height: calc(100% - 50px);
	overflow-y: auto;
	.content {
		column-count: 2;
		column-gap: 20px;
		.setting_wrapper {
			// 不要加宽度
			break-inside: avoid;
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12

HTML

<div class="parent">
	<div class="content">
		<div v-for="(item, index) in countyList" 
			:key="`contyList${index}`"
			class="setting_wrapper"
		></div>
	</div>
</div>
1
2
3
4
5
6
7
8