flexbox cheatsheet

flex.scss

.flex-box {

  display:          flex;

  flex-direction:   row;        /* row-reverse, column, column-reverse */
  flex-wrap:        nowrap;     /* wrap, wrap-reverse */
  flex-flow:        row nowrap; /* [flex-wrap] [flex-direction] */

  justify-content:  flex-start; /* flex-end, center, space-between, space-around */
  align-items:      stretch;    /* flex-start, flex-end, center, baseline */
  
  .flex-child {

    flex-grow:      1;          /* 4, 0.2 */ /* no negatives allowed */
    flex-shrink:    1;          /* 4, 0.2 */ /* no negatives allowed */
    flex-basis:     auto;       /* width, fill, max-content, min-content, fit-content, content */
    flex:           1 1 auto;   /* [flex-grow] [flex-shrink] [flex-basis]; */

    align-self:     auto;       /* flex-start, flex-end, center, baseline, stretch */
    order:          0;          /* positive or negative integer */
  }
}