a {
  -js-display: flex;
  display: flex;
  flex-flow: row;
  order: 0;
  flex: 0 1 2;
  transition: flex 200ms;
}
.inline {
  display: inline-flex;
  align-self: auto;
  align-content: stretch;
  flex: auto;
}

.a {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  align-content: flex-start;
  align-self: flex-start;
  flex: none;
}
.b {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: flex-end;
  flex-wrap: wrap;
  align-content: flex-end;
  align-self: flex-end;
  flex-shrink: 1;
}
.c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: reverse-wrap;
  align-content: center;
  align-self: center;
  flex-basis: auto;
}
.e {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: baseline;
  align-content: space-between;
  align-self: baseline;
}
.f {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  align-content: space-around;
  align-self: stretch;
}
.g {
  display: flex;
  flex: calc(1em + 1px) 0 0;
}
.h {
  flex-flow: column wrap;
}
.i {
  flex-flow: nowrap;
}
.inherit {
  order: inherit;
  flex-direction: inherit;
}
@supports (display: flex) {
  .foo {
    display: flex;
  }
}
@supports (flex: auto) {
  .foo {
    flex: auto;
  }
}
