CSS Flexbox Cheatsheet

/* Flexbox Container Properties */

.container {

  display: flex;

  flex-direction: row | column | row-reverse | column-reverse;

  flex-wrap: nowrap | wrap | wrap-reverse;

  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

  align-items: stretch | flex-start | flex-end | center | baseline;

  align-content: flex-start | flex-end | center | space-between | space-around | stretch;

  gap: 10px;

}

/* Flex Item Properties */

.item {

  flex-grow: 0;    /* How much to grow */

  flex-shrink: 1;  /* How much to shrink */

  flex-basis: auto;/* Initial size */

  flex: 0 1 auto;  /* Shorthand */

  align-self: auto | flex-start | flex-end | center | baseline | stretch;

  order: 0;        /* Order of item */

}