You've seen how you can use the various values of justify-content to position the children within a flex parent in the following ways:
What if you wanted to distribute the space differently? Perhaps you want to make one of the children lonely:
This arrangement is often seen in page headers, with a logo or title as the lonely child and icons or navlinks grouped together at the opposite end of the header. Flexbox and flex-grow in particular can be used to achieve this layout.
Consider this unstyled header:
The items are all block elements. Making the header a horizontal flex parent will put them all on the same line:
The font size is bumped up too, but this reveals that the icons and the heading are not aligned. Since the content is entirely text, you can fix this by aligning their baselines:
To make the heading lonely, you set its flex-grow property to 1 and let the values of the non-lonely children default to 0:
The lonely child absorbs all the extra space of the parent. This increases the size of the child. In this case, growing the child's size works out okay. But if the lonely child is meant to have a small size, perhaps because it is an image or has a background color, then the expansion will cause the content to smear across the page:
You can avoid this smearing by wrapping the child up in an intermediate container: