css-atoms/src/stylus/flexbox.atom.styl

A legal way of doing inline css

.flex {
  display: flex;
}

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

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-items-start {
  align-items: flex-start;
}

.flex-items-end {
  align-items: flex-end;
}

.flex-items-center {
  align-items: center;
}

.flex-items-baseline {
  align-items: baseline;
}

.flex-items-stretch {
  align-items: stretch;
}

.flex-self-start {
  align-self: flex-start;
}

.flex-self-end {
  align-self: flex-end;
}

.flex-self-center {
  align-self: center;
}

.flex-self-baseline {
  align-self: baseline;
}

.flex-self-stretch {
  align-self: stretch;
}

.flex-justify-start {
  justify-content: flex-start;
}

.flex-justify-end {
  justify-content: flex-end;
}

.flex-justify-center {
  justify-content: center;
}

.flex-justify-between {
  justify-content: space-between;
}

.flex-justify-around {
  justify-content: space-around;
}

.flex-content-start {
  align-content: flex-start;
}

.flex-content-end {
  align-content: flex-end;
}

.flex-content-center {
  align-content: center;
}

.flex-content-between {
  align-content: space-between;
}

.flex-content-around {
  align-content: space-around;
}

.flex-content-stretch {
  align-content: stretch;
}

/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
  flex: 1 1 auto;
  min-width: 0; /* 1 */
  min-height: 0; /* 1 */
}

.flex-none {
  flex: none;
}

for $class-name, $order in $flex-order-list {
  .flex-order{$flex-order-separator}{$class-name} {
    order: $order;
  }
}