超级牛的css样式（灵活盒子自适应）

终于解决了我的世界难题

当有三个盒子的时候，我需要这三个盒子排成一排，

当有四个盒子的时候，我需要第四个盒子排到第二行，自己占满一排，

当有五个盒子的时候，我需要第四个盒子和第五个盒子排到第二行，平均占满一排，

当有第六个盒子的时候，我需要第三、四、五盒子同样向第一排一样，一排三个盒子排列。

请看代码：（啦啦啦啦啦）

代码块：

                <div class="sub-indicators">

                    <div class="indicator-item" v-for="(items,indexs) in item.children" :key="indexs">

                        <div class="label">{{items.groupName}}</div>

                        <div class="content" v-if="items.textList">

                            <div class="left-content">

                                <span class="value">{{items.textList[0].value}}</span>

                                <span class="unit">{{ items.textList[0].unit }}</span>

                            </div>

                            <div class="right-content">

                                <span class="target-name">{{ items.textList[0].childrenList[0].name }}</span>

                                <i :class="items.textList[0].childrenList[0].value < 0?'el-icon-caret-top green ':'el-icon-caret-top red '"  v-if="items.textList[0].childrenList[0].value > 0 && items.textList[0].childrenList[0].value != null"></i>

                                <i :class="items.textList[0].childrenList[0].value < 0?'el-icon-caret-top green ':'el-icon-caret-top red '" v-if="items.textList[0].childrenList[0].value < 0 && items.textList[0].childrenList[0].value != null"></i>

                                <span :class="items.textList[0].childrenList[0].value < 0?'green':'red'">{{items.textList[0].childrenList[0].value}}{{ items.textList[0].childrenList[0].unit }}</span>

                            </div>

                        </div>

                    </div>

                </div>

css样式：

        .sub-indicators {

    margin-top: 15px;

    display: flex;

    flex-wrap: wrap; /* 允许子元素换行 */

    justify-content: space-between;

    align-items: center;

    border-radius: 4px;

}

.indicator-item {

    flex: 1 1 calc(33.333% - 20px); /* 宽度设置为三分之一减去间距 */

    margin-right: 20px;

    margin-bottom: 20px;

    background-color: #E9F7FF;

    padding: 16px;

    box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的总宽度 */

}

.indicator-item .label {

    color: #666666;

    font-size: 16px;

    margin-bottom: 8px;

}

.indicator-item .content {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.indicator-item .content .value {

    font-size: 18px;

    font-weight: 600;

    margin-right: 4px;

}

.indicator-item .content .unit {

    font-size: 12px;

    color: #666;

    margin-right: 8px;

}