flex实现瀑布流
利用flex等分和弹性的特点,可以很轻松实现瀑布流布局,但是适用范围不广,比较适合数据量较少或者静态页面,因为这种写法从后端拿数据过来后得动态生成列数,可以实现,但是略微麻烦,这里不做解释。最后效果sass代码.waterfall_boxdisplay: flexflex-wrap: wrap.box_columndisplay: flexflex-direction: columndivm
·
利用flex等分和弹性的特点,可以很轻松实现瀑布流布局,但是适用范围不广,比较适合数据量较少或者静态页面,因为这种写法从后端拿数据过来后得动态生成列数,可以实现,但是略微麻烦,这里不做解释。
最后效果
sass代码
.waterfall_box
display: flex
flex-wrap: wrap
.box_column
display: flex
flex-direction: column
div
margin: 10px
background-color: #ccc
width: 100px
text-align: center
.seventy
height: 70px
line-height: 70px
.eighty
height: 80px
line-height: 80px
.ninety
height: 90px
line-height: 90px
.thirteen
height: 130px
line-height: 130px
.fifteen
height: 150px
line-height: 150px
.twenty
height: 200px
line-height: 200px
原理
外层盒子设置flex横向分布,铺满后换行,每一列再用flex纵向分布,固定宽度,不换行,单列显示即可
更多推荐
已为社区贡献1条内容
所有评论(0)