_flex.sass

.flex
  display: flex
  //never forget to put this first
.align-center
  align-items: center
  //this will align items veritcally
.flex--center
  justify-content: center
  //basically text align center
.flex-1
  flex: 1
  //this will equally distrubte each element into a given space
.posa
  position: absolute
.posr
  position: relative
.txt-center
  text-align: center
.flex--start
  justify-content: flex-start
  //basically text align left
.flex--end
  justify-content: flex-end
  //basically text align right
.align-start
  align-items: flex-start
.align-end
  align-items: flex-end
.strong
  font-weight: bold
.light
  font-weight: 300
.fit
  object-fit: cover
  object-position: center center
.columns
  flex-direction: column
.rows
  flex-direction: row
.flex--space-around
  justify-content: space-around
.flex--space-between
  justify-content: space-between