css两列瀑布流布局排序 |css切换图层顺序

.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: 45%;
margin-bottom: 2%;
padding: 1%;
box-sizing: border-box;
}
.item:nth-child(odd) {
margin-right: 2%;
}

首先，大家需要将item放在同一个容器内，所以给出一个样式为.container的容器，使用flex的方式包裹住所有子元素。之后给出每个item的宽度和margin-bottom以及padding。需要注意到，在两列之间大家需要间隔一定距离，所以大家可以通过nth-child伪类来选择第一列的item再加一个margin-right的属性。

接着，大家就可以像普通的使用flex布局时一样控制item的行数了。如果需要固定每行显示两列，可以通过设置container的width为100%和flex-wrap: wrap。如果不需要固定两列，则可以设置container的max-width来限制。需要注意的是，这里的百分比width是相对于container的宽度而言的。

总结来说，两列瀑布流布局采用的是利用css的display:flex、width以及nth-child伪类来实现对每一列的布局控制，让最终的视觉效果更加美观和整齐。