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
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!