flex实现瀑布流

利用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纵向分布，固定宽度，不换行，单列显示即可