Growing & Shrinking

The reason Flex Items are flexible is because when we use display: flex on their parent, three new properties are applied to the items.

.flex-container {
  display: flex;
}

.flex-item {
  /* these are applied automatically */
  flex-shrink: 1;
  flex-grow: 0;
  flex-basis: auto;
}

See the Pen Getting started with Flexbox by Kevin (@kevinpowell) on CodePen.

flex-shrink

The flex-shrink property enables elements to shrink along the main-axis. If it wasn’t for flex-shrink: 1 being the default, a lot of the time that we use Flexbox, we’d end up with overflows.

flex-shrink being any other number than 0 means the element is allowed to shrink, which is why flex elements become flexible.

The number is a ratio, so if you have different elements with different shrink value, that means that they will shrink at different rates.

flex-grow

By default, flex-grow is set to 0 meaning elements will not grow bigger than their intrinsic size.

Just like flex-shrink, flex-grow is a ratio, so if flex items have different values, they will grow at different rates.

A use case

If we push flex-grow to it’s limits, we can do some cool things with it.

See the Pen flex-grow use case by Kevin (@kevinpowell) on CodePen.

flex-basis

My general rule of thumb is you probably don’t need to worry about flex-basis in 99% of situations, so I suggest that you don’t worry about it when getting started with Flexbox. As long as we leave it as auto, it simply looks at the elements calculated size.

To let you know what it is, if we delcare a flex-basis, we’re declaring the size along the main axis, so if we change the flex-direction, we’re essentially switching from declaring a width to declaring a height, which isn’t what we want to do too often.