Filling the space: flex-grow

Your will often want to create a layout where the items fill the space available and are equal in size. The easiest way to do this is to use the flex-grow property. You will often use a compound selector to target all of the items: eg. .box > * { flex-grow: 1; }.

You will usually want to set the flex-grow property to 1 for all items. You can also set the flex-grow property to a different value to create a layout where the items are not equal in size.

Use the developer tools to inspect the box above. Change the flex-grow property of one of the items to 2 and see what happens. What happens if you set it to 0?

You will usually see and use the shorthand flex: 1 instead of flex-grow: 1.