2. cross axis #

Created Wednesday 02 September 2020

Cross axis = perpendicular to direction of flex (main axis) align-items controls components along the cross axis.

It has 5 modes:

  1. center → all components stacked at the center, same space on both ends.
  2. flex-start → all components stacked at the start
  3. flex-end → all components stacked at the end
  4. stretch → All elements are streched fully along the cross axis. It is the default for align-items, if not specified.
  5. baseline → All components have the same baseline(line where letters sit). See this for clarification.

Picture #