Explaining Flexbox

If you want to see the calculations, you will need to use Firefox Devtools, otherwise, Chrome and Safari also have the overlay. Also, sub-pixel rounding will result in the decimal point value for the item widths to differ slightly.

Basic flexbox

A flex item

Another flex item

Flex items are also flex children
All direct children of the flex container become flex children

Understanding flex-grow

Take total amount of free space and divide it according to the flex-grow values for each flex item

With default values of flex: 0 1 auto

A

B

C

With flex: 1 1 auto

A

B

C

With last item not growing

A

B

C

Understanding flex-shrink

For each of the flex items that needs to be shrunk:

  1. Multiply its flex-shrink value by its flex-basis
  2. Divide the resultant value by the sum of flex-basis values of all the flex items
  3. Take this value and multiply by the total amount of space that needs to be shrunk
  4. That final value is the amount your flex item needs to shrink by

A
150px

B
450px

C
300px

A: (1 * 150) / (150 + 450 + 300) * 300 = 50px

B: (1 * 450) / (150 + 450 + 300) * 300 = 150px

C: (1 * 300) / (150 + 450 + 300) * 300 = 100px

Understanding flex-basis

With initial value of all items set to auto, content width of longest sentence is around 455px

Word

This is a sentence.

This is a much longer sentence so this example can make sense.

If width value is present, it will become the flex-basis value

Word

This is a sentence.

This is a much longer sentence so this example can make sense.

If flex-basis value is set, it will take precedence and become the flex-basis value

Word

This is a sentence.

This is a much longer sentence so this example can make sense.

When flex values are set to flex: 1 1 auto

This is a sentence.

This is a another sentence.

We just need content that takes up space here.

When flex values are set to flex: 1 1 0

This is a sentence.

This is a another sentence.

We just need content that takes up space here.

Flex directions

Initial value of row

A flex item

Another flex item

Flex items are also flex children
All direct children of the flex container become flex children

With flex-direction: column

A flex item

Another flex item

Flex items are also flex children
All direct children of the flex container become flex children

With flex-direction: row-reverse

A flex item

Another flex item

Flex items are also flex children
All direct children of the flex container become flex children

With flex-direction: column-reverse

A flex item

Another flex item

Flex items are also flex children
All direct children of the flex container become flex children

@hj_chen