00 display

display:flex;

or

display:flex-inline;


01 flex-direction

  • row (default): left to right in ltr; right to left in rtl
  • row-reverse: right to left in ltr; left to right in rtl
  • column: same as row but top to bottom
  • column-reverse: same as row-reverse but bottom to top

02 flex-wrap

  • nowrap (default): all flex items will be on one line
  • wrap: flex items will wrap onto multiple lines, from top to bottom.
  • wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

03 flex flow

This is a shorthand flex-direction and flex-wrap properties, which together define the flex container's main and cross axes. Default is row nowrap.




06 align-content

The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis; that is, it specifies the behavior of the boxes in the axis when they wrap into multiple lines. Nothing here affects left ot right, just vertical alignment of wrapped cells. This property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap)

Basic Positioning

  • center: Pack items around the center
  • start : Pack items from the start
  • end: Pack items from the end
  • flex-start: Pack flex items from the start
  • flex-end: Pack flex items from the end

Normal alignment
  • Normal:

Baseline alignment
  • baseline :
  • first baseline :
  • last baseline :

Distributed alignment
  • space-between : Distribute items evenly. The first item is flush with the start, the last is flush with the end
  • space-around : Distribute items evenly. Items have a half-size space on either end
  • space-evenly : Distribute items evenly Items have equal space around them
  • stretch : Distribute items evenly. Stretch 'auto'-sized items to fi the container

Overflow alignment
  • safe center :
  • unsafe center :

Global values
  • inherit :
  • initial :
  • revert :
  • revert-layer :
  • unset :