The 'justify-content' property isn't working
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: none
orflex: 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-width
on 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.
This answer might be stupid, but I spent quite some time to figure it out.
What happened to me was I didn't set display: flex
to the container. And of course, justify-content
won't work without a container with that property.