uni-app图片瀑布流布局-弹性盒子

使用弹性盒子实现瀑布流布局

直接上代码
html


    
        
        
            测试测试测试
        
    
    
        
        
            测试测试测试
        
    
    
        
        
            测试测试测试
        
    
    
        
        
            测试测试测试
        
    
    
        
        
            测试测试测试
        
    
    
        
        
            测试测试测试
        
    

css

.tan-main-wrap{
    display: flex;  
    flex-flow:column wrap;
    height: 100Vh;
}
.tan-list-box{
    margin: 10rpx;
    width: calc(100% / 2 - 20rpx);
    background-color: #f5f5f5;
    border-radius: 8px;
    
    overflow: hidden;
}
.tan-img-pic{
    width: 100%;
    image{
        width: 100%;
        height: 100%;
    }
}
.tan-list-title{
    margin: 20rpx;
    font-size: 30rpx;
}

最后的效果


image.png

你可能感兴趣的:(uni-app图片瀑布流布局-弹性盒子)