Flexbox sizing mental model

The following explanation from Anna Monus is taken out of A Comprehensive Guide to Flexbox Sizing and I find Anna´s text most helpful. Anna has written a multi-part flexbox tutorial, which consists of

  1. A Comprehensive Guide to Flexbox Alignment
  2. A Comprehensive Guide to Flexbox Ordering & Reordering
  3. A Comprehensive Guide to Flexbox Sizing
  4. Flexbox vs. CSS Grid: Which Should You Use and When?

Below is the default setting for flex.

flex: 0 1 auto;

/* this translates to */
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

The default setting tells the item:

Anna´s explanation:

… Flexbox’s sizing properties allow you to make decisions about three kinds of scenarios:

As flexbox is a one-dimensional layout, as opposed to CSS Grid which is two-dimensional, you can allocate free space along the main axis (whether that be top to bottom, bottom to top, left to right, or right to left). You can set the direction of the main axis using the flex-direction property.

… Note that while flex-grow and flex-shrink have relative values (0, 1, 2, etc.), flex-basis always takes an absolute value (px, rem, content, etc.).

Comments