* 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;
}

I have been trying for hours now to make a flexbox that has these attributes for fitting figures:

1. if a row is full of items(this case images) there is equal spacing “x” between items AND the spacing between the left-most item to the left-border & the right-most item to the right-border is the same.
2. if a row is only partially full then it should fill in from left-to-right leaving empty space on the right-hand side of the partially full row. The spacing between items should be the same “x” as above
3. the distance between the left-most item to the left-border of a full row & a partially row should be the same.
4. The content area should adjust dynamically with the screen so on a mobile phone there might be 5 items per row, on an ultrawide 20 items per row.

The issue I’m getting is I need a mix of properties from space-evenly & flex-start. I want the fact that space-evenly creates a symmetrical row with equal distances to borders & between objects. But I want the fact that flex-start fills left-to-right & will leave empty space to the right. I’ve tried a number of width: calc() solutions but I can’t seem to make a substantial enough change.

What I get with space-evenly is this, partially filled rows don’t line up with full ones:

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

with flex-start full rows can be off-center/off-kilter/not-symmetrical

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