* 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:
- 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.
- 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
- the distance between the left-most item to the left-border of a full row & a partially row should be the same.
- 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