如何制作一个弹性盒，可以均匀地间隔项目，同时还允许部分填充行？空间均匀和弹性启动的混合

Question

* flex box stuff */
    display: flex;

    /* this makes it fill from left to right, leaving empty space on the right */
    /* justify-content: flex-start;  */

    /* this makes it all fill evenly, but then partially filled rows look weird */
    justify-content: space-evenly;
    
    flex-direction: row;
    flex-wrap: wrap; /* this makes it so there's more than 1 row */
    row-gap: 4vh;
    column-gap: 4%;
    /* flex box end */

/* a lot of this has been from trying out many methods + chatGPT */
figure {
    flex-grow: 1;
    width: calc(100% / 5vw);
    /* width: calc(33.33% - 2%); product of ChatGPT no clue why it recommended this */
    max-width: 5vw;
    margin-left: calc(100% / 5vw);
    margin-right: calc(100% / 5vw);

    text-align: center;
    font-weight: 600;
    font-style: italic;
}

/* Every icon's/figure's image will be the same size so this is perfect */
figure img{
    width: 100%; /* If I set the width & height to 100% that tells it to use the full 6vw/vh of the viewport*/
    height: auto; /* keep at auto that way it keeps the aspect ratio */
    max-width: 5vw;
    max-height: 5vh;
    border-style: groove;
    border-width: .2rem;
}

我已经尝试了几个小时来制作一个具有这些用于拟合图形的属性的弹性盒：

1. 如果一行充满了项目（本例为图像），则项目之间的间距“x”相等，并且最左边的项目到左边框和最右边的项目到右边框之间的间距是相同的.
2. 如果一行仅部分满，则应从左到右填充，在部分满的行的右侧留下空白空间。项目之间的间距应与上面的“x”相同
3. 整行和部分行最左边的项目到左边框的距离应该相同。
4. 内容区域应随屏幕动态调整，因此在手机上每行可能有 5 个项目，在超宽的情况下每行可能有 20 个项目。

我遇到的问题是我需要混合

space-evenly

和

flex-start

的属性。我希望

space-evenly

创建一个对称的行，与边界和对象之间的距离相等。但我希望

flex-start

从左到右填充并在右侧留下空白空间。我已经尝试了许多

width: calc()

解决方案，但我似乎无法做出足够大的改变。

我通过空间均匀得到的是这样的，部分填充的行与完整的行不对齐：

|  0 0 0 0 0 0 0  |
|  0  0  0  0  0  |

使用 Flex-Start 整行可以偏离中心/不平衡/不对称

|  0 0 0 0 0 0 0      | this is an exaggeration of the distance between right-border to item
|  0 0 0 0

Answer 1

尝试使用flex-wrap和gap属性，看看组合起来是否有效