flex 三栏多行布局

 

 

要点：

父元素宽度设置100%加弹性布局加换行，

子元素宽度设置，两栏width: (100% / 2), 三栏width: (100% / 3)；

.content {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    .block{
        width: 33%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 180rpx;
        image {
            width: 80rpx;
            height: 80rpx;
        }
        text {
            margin-top: 16rpx;
            font-size: 28rpx;
            color: #606266;
        }
    }
}