Flexbox: Grow or shrink an item if necessary
flex-grow

The defaut for any item is 0.

If all items are defined as 1 and one is defined as 2, the bigger element will take the space of two “1” items.

flex-shrink

The defaut for any item is 1.

If all items are defined as 1 and one is defined as 3, the bigger element will shrink 3x the other ones. When less space is available, it will take 3x less space.

flex-basis

If set to auto, it sizes an item according to its width or height, and adds extra space based on the flex-grow property.

If set to 0, it does not add any extra space for the item when calculating the layout.

If you specify a pixel number value, it will use that as the length value (width or height depends if it’s a row or a column item)

flex

This property combines the above 3 properties:

  • flex-grow
  • flex-shrink
  • flex-basis

and provides a shorthand syntax: flex: 0 1 auto

Lessons in this unit:

0: Introduction
1: Align rows or columns
2: Vertical and horizontal alignment
3: Wrap
4: Moving items before / after another one using order
5: Vertical alignment using align-self
6: ▶︎ Grow or shrink an item if necessary
7: DEMO Create a layout using Flexbox
Want to learn more? Check out our courses