CSS-flex实现一排固定个数，且后排自动向前补齐

做demo的时候遇到问题

想要的样式：

一个不固定长度的ul，一排最多5个li，li里面包含小盒子放图片和下面的span标语，大概长这样：

html文件如下：

<div class="body">
        <ul>
            <li>
                <div class="icon"></div>
                <span>夸克日报</span>
            </li>
            <li>
                <div class="icon"></div>
                <span>夸克日报</span>
            </li>
            <li>
                <div class="icon"></div>
                <span>夸克日报</span>
            </li>
            <li>
                <div class="icon"></div>
                <span>夸克日报</span>
            </li>
            <li>
                <div class="icon"></div>
                <span>夸克日报</span>
            </li>
            <li>
                <div class="icon"></div>
                <span>夸克日报</span>
            </li>
            <li>
                <div class="icon"></div>
                <span>夸克日报</span>
            </li>
        </ul>
    </div>

但是当我写css的时候发现，想实现justify-content:space-around总是失效

body,
ul,
li {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
}



.body {
    position: fixed;
    top: 40vw;
    left: 50%;
    margin-left: -33vw;
    background-color: firebrick;
    width: 66vw;

    ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content:space-around;

        li {
            flex: 0 0 20%;   //一排5个
            .icon {
                width: 8vw;
                height: 8vw;
                background-color: #fff;
            }
        }
    }

    ul:after {           //最后一行自动补齐
        content: "";
        flex: auto;
    }

}

最后求助群里大佬，大佬给了一个非常简单的方案...li里面的元素也flex横着居中，竖着排列即可。

body,
ul,
li {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
}



.body {
    position: fixed;
    top: 40vw;
    left: 50%;
    margin-left: -33vw;
    background-color: firebrick;
    width: 66vw;

    ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content:space-around;

        li {
            flex: 0 0 20%;
             display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .icon {
                width: 8vw;
                height: 8vw;
                background-color: #fff;
            }
        }
    }
    ul:after {
        content: "";
        flex: auto;
    }
}

非常神奇！