It's pretty annoying, but you can't use flexbox for that.
The better way is to go with CSS grid instead, and apply
/* for space-around style */
.fixed-grid--around{
grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
justify-items: center;
}
/* for space-between style*/
.fixed-grid--between{
grid-template-columns: repeat(auto-fit, 150px);
justify-content: space-between;
}
/* both should run fixed width elements equal to the declared in the container */
.grid-element{
width: 150px;
}
By setting the grid columns minimum width to their elements width and the max column width to 1 fr we can get them to evenly distribute the space around them. For space-between style, autofit and space-between does the trick.
So it adds columns to fill the container, evenly distributes the space between them until another column can be added, and wraps as needed. Just what we always hoped for flexbox to do.
A pen I made before exploring the issue:
https://codepen.io/facundocorradini/pen/XVMLEq
If you're gonna use this, make sure to add some fallback for browsers that don't support grid. might be floats, inline-blocks, flex, or whatever. CSS Grid is really good at overriding the fallbacks, so it's fairly easy to apply.
