Hi there,
I am trying to have the red links in this fiddle become equally spaced using flex, but I can’t seem to get it to work.
I have tried using justify-content: space-between but it doesn’t seem to work.
Any ideas what I have wrong?
Are you looking for a fixed space or variable with available space?
It can be variable. I can do it with margins, but can’t seem to do it with just flex.
The problem is the ul doesn’t have any free space to spread the flex items out. That is becuse it is a flex item itself, so shrinks to fit its content. Apply flex-grow to it to allow expansion.
2 Likes
1 Like
Awesome, thank you that worked!
No problem, you’re very welcome. 
You might also like to compare justify-content: space-between; with justify-content: space-around;.