Flexible sizing in main direction, normal and stretchy sizing in cross direction

Sizing flex items is the heart of Flexbox layout

Once the flex container set the ground rules, the fun begins!

Order of sizing

First, apply flexible sizing to the flex items to get their sizes in the main direction.

Using the size in the main direction, do an initial sizing of the flex item in the cross direction.

Then, stretch the flex lines.

Then, stretch the flex items.

A flex container sets the stage and sets the main direction with

The main direction is the direction in which flex items will be laid out. And it’s the direction in which all Flexbox-only sizing properties are applied.

The flex items are the “flex boxes”, not the flex container

Remember, the flex container itself is sized according to the rules of whichever layout type it participates in.

The flex items are sized according to the rules of Flexbox layout. The flex items are the flex(ible) boxes, if you will.

The three flex item sizing properties in Flexbox.

flex-basis. This lets the flex item say what size it would like to have in the main axis. That size is called the flex base size.

flex-grow. This lets the flex item say if it wants to grow its size above its flex base size if given the opportunity.

flex-shrink. This says if the flex item is willing to shrink its size below its flex base size if asked to.

Both flex-grow and flex-shrink can say not just if, but also at what rate relative to other flex items on a flex line they’re willing to change their size.

Flex items have the final say over their sizing

The flex container provides a stage with rules, but the flex items have the final say over their size.

In the main axis, flexible sizing is all that matters, and the flex container gets no chance at input at all.