flex 平均分布 换行对齐 文件管理器宫格布局

如何可以使用flex布局 进行平均分布，又可以换行呢？
第一步：
设置flex容器元素样式
display: flex;
display: -webkit-flex;
justify-content: space-around;/或者space-between/
flex-direction: row;
flex-wrap: wrap;

效果：

屏幕快照 2018-09-16 下午8.32.45.png

第二步：
设每一行最多显示n个元素，向flex容器追加2*n个元素，追加的元素的样式继承flex子元素的样式，并设置每个元素的高度为0，visibility:hidden;
效果：

屏幕快照 2018-09-16 下午8.36.15.png

第三步：

若每行的元素个数不随window宽度变化而改变

设置flex容器元素宽度100%；
设置元素宽度x%,x为每一行最多显示的个数分之一，百分比；

若每行的元素个数随window宽度变化而改变

设置flex容器元素宽度100%；
设置元素宽度x%,x为每一行最多显示的个数分之一，百分比；
设置元素的max-width min-width在一个合适的范围

不完美之处：若只有一行，宽度继续增大，元素间距在变化。而我期望只有一行时，宽度足够大时，变化宽度，元素间距不变化。希望有人能提供解决方案。