justify-content: space-between Causes Unexpected Markup

When Flexbox first appeared, many people liked the justify-content property, which allowed them to evenly distribute grid items using space-between or space-around. And of course, they began to use it. But there is one problem.

When we use these values, we don’t think that the number of items may change. For example, if I use space-between to add 2 more items to a 4-column grid, they will appear on each side of the parent and not at the beginning of the line as the user expects.

Therefore, it is better to use margin if you need IE11 support, or column-gap to set space between items.