多个icon布局

10个以内icon 两排局中平分显示,特殊处理6、7、8个的情况


.icons{
    width: 100%;
    padding-bottom: 30rpx;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly; 
}
.icons-item{
    height: 130rpx;
    margin-top: 30rpx;
    box-sizing: border-box;
    width: 20%;
}
.icons-item image{
    width: 90rpx;
    height: 90rpx;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    border: 1rpx solid red;
}
.icons-item view{
    width: 100%;
    text-align: center;
    font-size: 26rpx;
    color: #303133;
    height: 26rpx;
    line-height: 26rpx;
    margin-top: 15rpx;
}
/* 每一排显示5个 4个 3个 单独处理 */
.icons-item.five{
    width: 20%;
}
.icons-item.four{
    width: 25%;
}
.icons-item.three{
    width: 33.3%;
}
html/css
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。