Growing and Shrinking

The Flex Shorthand

• Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) stylesheets, saving time and energy.
  ~Source: Shorthand properties on MDN
• flex is actually a shorthand for flex-grow, flex-shrink and flex-basis.
• flex: 1 equates to: flex-grow: 1, flex-shrink: 1, flex-basis: 0.
• So when we put flex: 1 on our divs, we were actually specifying a shorthand of flex: 1 1 0.

Flex-Grow

• flex-grow is used as the flex-item’s “growth factor”.
• When we applied flex: 1 to every div inside our container, we were telling every div to grow the same amount.
• If we instead add flex: 2 to just one of the divs, then that div would grow to 2x the size of the others.

Flex-Shrink

• flex-shrink sets the “shrink factor” of a flex item.
• flex-shrink only gets applied if the size of all flex items is larger than their parent container.
• For example, if our 3 divs from above had a width declaration like: width: 100px, and .flex-container was smaller than 300px, our divs would have to shrink to fit.
• If you do not want an item to shrink then you can specify flex-shrink: 0;.

Flex-Basis

• To put it simply: In a Flex row, flex-basis does the same thing as width. In a Flex column, flex-basis does the same thing as height.
• flex-basis sets the initial size of a flex item, so any sort of flex-growing or flex-shrinking starts from that baseline size.
• Using auto as a flex-basis tells the item to check for a width declaration (i.e. width: __px).
• There is a difference between the default value of flex-basis and the way the flex shorthand defines it if no flex-basis is given. The actual default value for flex-basis is auto, but when you specify flex: 1 on an element, it interprets that as flex: 1 1 0.
• If you want to only adjust an item’s flex-grow you can simply do so directly, without the shorthand.

Basic Values of flex

• flex: initial	flex: auto
  Equivalent to flex: 0 1 auto.	Equivalent to flex: 0 1 auto.

  flex: none	flex: <positive-number>
  Equivalent to flex: 0 0 auto.	Equivalent to flex: <positive-number> 1 0.

Basic Syntax

• By default flex items don't shrink below their minimum content size. To change this, set the item's min-width or min-height.

• /* Keyword values */
  flex: auto;
  flex: initial;
  flex: none;
  
  /* One value, unitless number: flex-grow
  flex-basis is then equal to 0. */
  flex: 2;
  
  /* One value, width/height: flex-basis */
  flex: 10em;
  flex: 30%;
  flex: min-content;
  
  /* Two values: flex-grow | flex-basis */
  flex: 1 30px;
  
  /* Two values: flex-grow | flex-shrink */
  flex: 2 2;
  
  /* Three values: flex-grow | flex-shrink | flex-basis */
  flex: 2 2 10%;
  
  /* Global values */
  flex: inherit;
  flex: initial;
  flex: revert;
  flex: revert-layer;
  flex: unset;
  

• Try resizing the flex containers below from the bottom-right corners:
  

• flex-wrap

  • By default, flex items will try to fit into one line but flex-wrap: wrap will ignore that entirely. Now, if those flex items can’t fit in the same space, they’ll break onto a new line.