css3 瀑布流 行布局 |css长度格式

/*CSS3瀑布流布局代码*/
.waterfall {
column-count: 3;     
column-gap: 15px;
}
.waterfall-item {
display: inline-block;
width: 100%;
margin-bottom: 15px;
}
/*行布局代码*/
.row-layout {
display: flex;
flex-wrap: wrap;
}
.row-layout-item {
flex: 1 0 33.33%; /*指定每行三列*/
margin-bottom: 15px;
}

在CSS3瀑布流布局中，大家使用column-count属性来指定列的数量，column-gap属性来指定列之间的间距。而在每一个元素中使用display: inline-block;来水平排列每个小块。

在行布局中，大家使用display: flex;来指定排列方式，flex-wrap: wrap;来表示一行超过一定容量时自动换行。而在每个元素中使用flex: 1 0 33.33%;来指定每一行的元素数量，即每行三个元素。

通过CSS3瀑布流布局和行布局，大家可以轻松实现多种流行的前端设计效果，让网站更加时尚和美观，为用户带来更好的使用体验。