flex.css

/*

  FLEX OBJECTS HELPER

*/

.d-f { display: flex; }

.fxw-w { flex-wrap: wrap; }
.fxw-wr { flex-wrap: wrap-reverse; }
.fxw-nw { flex-wrap: nowrap; }

.fxd-c { flex-direction: column; }
.fxd-cr { flex-direction: column-reverse; }
.fxd-r { flex-direction: row; }
.fxd-rr { flex-direction: row-reverse; }

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

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

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

.fx-n { flex: none; }
.fx-1 { flex: 1; }

.fxb-a { flex-basis: auto; }

.fxg-1 { flex-grow: 1; }
.fxs-1 { flex-shrink: 1; }

@for $i from 0 to 10 {
  .ord-$(i) { order: $i; }
}