css + 瀑布流 + flex 布局

高度不一致盒子，左右排列均分容器。效果图如下。

html代码：

 css代码：

.box {
			width: 400px;
			column-count: 3;
		    flex-flow:column wrap;
			background-color: aliceblue;
		    
		}
		.item {
			width: 33.33;
		    flex-grow: 1;
		    break-inside: avoid-column; // 
		}
		.red {
			height: 400px;
			background-color: red;
		}
		.yellow {
			height: 200px;
			background-color: yellow;
		}
		.purple {
			height: 300px;
			background-color: purple;
		}
		.green {
			height: 300px;
			background-color: green;
		}

一定要子元素的css样式，设置

break-inside: avoid-column; // 

 否在你回看到换行组件被截掉的情况。

多加几个字元素，就是以下效果：