Share out what is left over

01 / 05

Where does the leftover go

Line things up with display: flex; and the children come out the size of their contents. If the parent is wider, space is left over on the right.

What to do with that leftover is what this lesson is about.

02 / 05

A fixed width does not work well

Pin it down with something like width: 200px; and:

parent wide … a big gap is left on the right
parent narrow … they get squeezed

You end up rewriting it every time the parent width changes.

03 / 05

flex-grow is "your share of the leftover"

Write flex-grow on a child and it can take some of the leftover space. The value is the ratio of the share.

You write it on the children. The parent arranges, the children grow.

.main {  flex-grow: 1;}

04 / 05

Read the numbers as a ratio

With .main at 2 and .side at 1, the leftover space is split 2 to 1. It is not the box widths themselves that come out 2 to 1.

A child with nothing written counts as 0 and takes none of the leftover. It does not grow at all.

.main {  flex-grow: 2;}.side {  flex-grow: 1;}

05 / 05

Pick one thing to stretch

The common shape is "logo takes its contents, one thing in between stretches". Decide on one thing to stretch and the rest settles by itself.

Have a go.