Flexbox quick-reference

Main flexbox properties:

Flex container
- display: flex
- shorthand: flex-flow - (flex-direction | flex-wrap)
- control of flex elements along the main axis
  - flex-direction
  - flex-wrap
  - justify-content
- control of flex elements along the cross axis
  - align-items
  - align-content (control of spacing between flex lines)
Flex items (direct children of container)
- control of render order: order
- control of width: flex-basis
- control of grow factor: flex-grow
- control of shrink factor: flex-shrink
- control of position along cross-axis: align-self (overrides align-items)
- shorthand: flex - (flex-grow | flex-shrink | flex-basis)

Refs

Notes about flex-grow, flex-shrink, flex-basis

A flex container distributes free space to its items (proportionally to their flex grow factor) to fill the containers, or shrinks them (proportionally to their flex shrink factor) to prevent overflow.

flex-basis This component sets the flex-basis longhand and specifies the flex basis: the initial main size of the flex item, before free space is distributed according to the flex factors.

In Flexbox the initial size of a flex item, if not explicitly specified, is set by its content
What flex-grow does: after flex items have been rendered, if unused space is available, it distributes that space proportionally between the flex items
- We can calculate the flex grow factor like this: (container-width - (sum of flex-items' width)) / (sum of flex-grow values)
flex-shrink's function is analogous, but it triggers when the container is filled beyond its size and it subtracts space proportionally
flex-basis is the basis for the above calculations, it defines the initial size of flex items before the above properties are applied
- in terms of box-sizing, it behaves like the width property.