One problem I’ve had dealing with the wonderful flex CSS rules is when using justify-content: space-between; you end up with edges either side creating a buffer against your container.

Well no longer!

.flex-item {width: calc(1/3*100% - (1 - 1/3)*15px);}

Set the fraction appropriately for how many items per row, such as 4 items would be 1/4 and three items 1/3. Then finally change the final ’15px’ to your gap size to control the spacing. (might be worth adding a margin bottom of whatever this is as well if you have more than one row)

Happy flexing!

Leave a Reply