Summarised from [](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
```css
.container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  flex-flow: (flex-direction) (flex-wrap);

  /* main axis */
  justify-content: (flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right) (safe | unsafe)?;
  /* cross axis */
  align-items: (stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end) (safe | unsafe)?;
  /* for dealing with extra space in the cross axis */
  align-content: (flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline) (safe | unsafe)?;

  /* gaps */
  gap: 1px; /* both axes */
  gap: 1px 2px; /* row and column */
}

.item {
  /* This allows layout order to differ from source order */
  order: 5; /* default = 0 */

  /* verify what happens in case of tied order */

  flex-grow: 4; /* proportion -- make examples */
  flex-shrink: 5; /* proportion -- make examples */
  flex-basis: {length} | auto | content; /* content not well supported */
  
  flex: none | ( {flex-grow} {flex-shrink} {flex-basis} )

  align-self: auto | flex-start | flex-end | center | baseline | stretch; /* per item override of align-items */
}
```