// Parent utilities
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap { flex-wrap: nowrap; }

.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

// Child utilities
.flex-auto { flex: auto; }
.flex-initial { flex: initial; }
.flex-none { flex: none; }
.flex-grow { flex-grow: 1; }
.flex-shrink { flex-shrink: 1; }
.flex-no-grow { flex-grow: 0; }
.flex-no-shrink { flex-shrink: 0; }

.responsive({
  &flex { .flex; }
  &inline-flex { .inline-flex; }
  &flex-row { .flex-row; }
  &flex-row-reverse { .flex-row-reverse; }
  &flex-col { .flex-col; }
  &flex-col-reverse { .flex-col-reverse; }
  &flex-wrap { .flex-wrap; }
  &flex-wrap-reverse { .flex-wrap-reverse; }
  &flex-nowrap { .flex-nowrap; }
  &items-start { .items-start; }
  &items-end { .items-end; }
  &items-center { .items-center; }
  &items-baseline { .items-baseline; }
  &items-stretch { .items-stretch; }
  &justify-start { .justify-start; }
  &justify-end { .justify-end; }
  &justify-center { .justify-center; }
  &justify-between { .justify-between; }
  &justify-around { .justify-around; }
  &flex-auto { .flex-auto; }
  &flex-initial { .flex-initial; }
  &flex-none { .flex-none; }
  &flex-grow { .flex-grow; }
  &flex-shrink { .flex-shrink; }
  &flex-no-grow { .flex-no-grow; }
  &flex-no-shrink { .flex-no-shrink; }
});