How do I achieve a flex layout with centered elements but without space-between/around?

Question

Basically, how do I achieve this layout while having equal spacing on both left and right sides? Space-between and space-around do not seem to work because the remaining elements at the bottom are then either centered or on both sides of the container.

Answer 1

You can use flex-wrap:

flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap