Ratios

💡

For the remainder of the flexbox section and any future points where I discuss flexbox, I will assume that you are using the default row direction.

With flexbox, you can control the ratio each element takes up within the flexbox container.

Flex Basis == Width

Flex Basis is used to set the hypothetical width of an elements width. The width and flex-basis properties do the same thing, but fle-basis takes priority. This is only the hypothetical width, as flex will shrink elements accordinlgy. Think of flex-basis as setting the ideal width.

Note: You set the flex-basis property in the child, not the parent.

flex-basis: 50px;

flex-basis: 100px;

Minimum Content in Flexbox

By default Flexbox works as if you set width: min-content; so it will not overflow.

Flex Grow

The flex-grow property allows you to choose a specific element to eat up additional space in the parent.

Note: You set the flex-grow property in the child, not the parent.

In the following example, the flex-grow property is set on the middle div.

You can use units from 1 - 10 for flex-grow and flex-shrink. These units refer to the elements growth ratio.

flex-grow: 1;

Flex Shrink

The flex-shrink allows you to choose the rate at which an element will shrink compared to its siblings.

Note: You set the flex-grow property in the child, not the parent.

In the following example, the flex-shrink property is set on the middle div.

flex-shrink: 10;

Flex-Shrink is ony activated when there is no space in the parent container and there is still space in the child containers. It can often be difficult to see if it is doing anything.