justify-content only has an effect if there’s space left over after your flex items have flexed to absorb the free space. In most/many cases, there won’t be any free space left, and indeed justify-content will do nothing.
Some examples where it would have an effect:
-
if your flex items are all inflexible (
flex: noneorflex: 0 0 auto), and smaller than the container. -
if your flex items are flexible, BUT can’t grow to absorb all the free space, due to a
max-widthon each of the flexible items.
In both of those cases, justify-content would be in charge of distributing the excess space.
In your example, though, you have flex items that have flex: 1 or flex: 6 with no max-width limitation. Your flexible items will grow to absorb all of the free space, and there will be no space left for justify-content to do anything with.