.flex {
  display: flex;
}
.flex--if {
  display: inline-flex;
}

// Flex direction
.flex-fd--r {
  flex-direction: row;
}
.flex-fd--rr {
  flex-direction: row-reverse;
}
.flex-fd--c {
  flex-direction: column;
}
.flex-fd--cr {
  flex-direction: column-reverse;
}

// Flex wrap
.flex-fw--n {
  flex-wrap: nowrap;
}
.flex-fw--w {
  flex-wrap: wrap;
}
.flex-fw--wr {
  flex-wrap: wrap-reverse;
}

// Justify content
.flex-jc--fe {
  justify-content: flex-end;
}
.flex-jc--fs {
  justify-content: flex-start;
}
.flex-jc--c {
  justify-content: center;
}
.flex-jc--sa {
  justify-content: space-around;
}
.flex-jc--sb {
  justify-content: space-between;
}

// Align items
.flex-ai--fs {
  align-items: flex-start;
}
.flex-ai--c {
  align-items: center;
}
.flex-ai--fe {
  align-items: flex-end;
}
.flex-ai--s {
  align-items: stretch;
}
.flex-ai--b {
  align-items: baseline;
}

// Flex grow
.flex-fg--0 {
  flex-grow: 0;
}
.flex-fg--1 {
  flex-grow: 1;
}

// Flex shrink
.flex-fs--0 {
  flex-shrink: 0;
}
.flex-fs--1 {
  flex-shrink: 1;
}

// Flex basis
.flex-fb--a {
  flex-basis: auto;
}
.flex-fb--0 {
  flex-basis: 0;
}

// Align self
.flex-as--a {
  align-self: auto;
}
.flex-as--fs {
  align-self: flex-start;
}
.flex-as--c {
  align-self: center;
}
.flex-as--fe {
  align-self: flex-end;
}
.flex-as--s {
  align-self: stretch;
}
.flex-as--b {
  align-self: baseline;
}

.flex-1 {
  flex: 1;
}