css 瀑布流布局_CSS-瀑布流布局

参考：

1、column-count 把div中的文本分为多少列

2、column-width 规定列宽

3、column-gap 规定列间隙

4、break-inside: avoid; 避免元素内部断行并产生新列

111

222

/*大层*/

.box {

margin: 0 auto;

width: 100%;

column-count: 2;

column-width: 334px;

column-gap: 20px;

}

.item{

margin-bottom: 10px;

break-inside: avoid; /* 防止多列布局，分页媒体和多区域上下文中的意外中断 */

}

.box{

display: flex;

flex-direction: row;

margin: 0 auto;

width: 100%;

}

.col{

margin-right: 20px;

flex-direction: column;

width: 334px;

}

.item {

background:#fff;

margin-bottom:20px;

}