Use CSS Flexbox to layout application

Two axis

The main axis

• Defined by flex-direction
• Use justify-content to align items on the main axis

The cross axis

• Perpendicular to the main axis
• Use align-items to align items on the cross axis

Start and End

• Depends on the writing-mode value, eg: English has left as start, right as end.

Flex container

• display: flex or display: inline-flex
• Direct children become flex items.

Flex items

• Displayed as specified by flex-direction
• Start from the start edge of the main axis
• Do not stretch on the main dimension, but can shrink.
• Will stretch to fill the size of the cross axis.
• The flex-basis property is set to auto.
• The flex-wrap property is set to nowrap.
• Will overflow container

Shorthand

• flex
  • flex-grow flex-shrink flex-basis
  • Specified on flex item
• flex-flow
  • flex-direction flex-wrap
  • Specified on flex container