Generated by SassMeister.com.

SassMeister-input-HTML.html

<!-- 
  Classess related to flexbox are grouped within [ and ] symbols.
  These symbols' purpose is to make flex-related classes more visible
  and they don't have any other significance and meaning.
-->
<!-- REGULAR FLEXBOX -->
<div class="container">
  Regular flexbox
  <div class="flex [ flex-block ]">
    <div class="[ flex-item ]">
      Flex item content 1
    </div>
    <div class="[ flex-item ]">
      Flex item content 2
    </div>
    <div class="[ flex-item flex-item--flex ]">Flex item content 3</div>
    <div class="[ flex-item flex-item--first ]">Flex item collapsed 4</div>
    <div class="[ flex-item flex-item--first ]">Flex item content 5</div>
  </div>
</div>
<!-- FLEXBOX REVERSED -->
<div class="container">
  Reversed flexbox
  <div class="flex [ flex-block flex--reverse ]">
    <div class="[ flex-item ] u-1/2">
      Flex item content 1
    </div>
    <div class="[ flex-item ]">
      Flex item content 2
    </div>
    <div class="[ flex-item ]">Flex item content 3</div>
    <div class="[ flex-item ]">Flex item content 4</div>
    <div class="[ flex-item ]">Flex item content 5</div>
  </div>
</div>
<!-- nested flexboxes -->
<div class="[ flex-block ]">
  <!-- FLEXBOX vertical -->
  <div class="container u-1/2">
    Vertical flexbox
    <div class="flex box-vertical [ flex-block flex--vertical ]">
      <div class="[ flex-item ]">
        Flex item content 1
      </div>
      <div class="[ flex-item ]">
        Flex item content 2
      </div>
      <div class="[ flex-item flex-item--flex ]">Flex item content 3</div>
      <div class="[ flex-item ]">Flex item content 4</div>
      <div class="[ flex-item ]">Flex item content 5</div>
    </div>
  </div>
  <!-- FLEXBOX vertical reversed -->
  <div class="container u-1/2">
    Vertical Reversed flexbox
    <div class="flex box-vertical [ flex-block flex--vertical-reverse ]">
      <div class="[ flex-item ]">
        Flex item content 1
      </div>
      <div class="[ flex-item ]">
        Flex item content 2
      </div>
      <div class="[ flex-item flex-item--flex ]">Flex item content 3</div>
      <div class="[ flex-item ]">Flex item content 4</div>
      <div class="[ flex-item ]">Flex item content 5</div>
    </div>
  </div>
</div>
 <!-- FLEXBOX wrapping -->
  <div class="container u-8/10">
    Flexbox with wrapping 
    <div class="flex box-vertical [ flex-block flex--multiline ]">
      <div class="[ flex-item ]">
        Flex item content 1
      </div>
      <div class="[ flex-item ] u-1/2">
        Flex item content 2
      </div>
      <div class="[ flex-item flex-item--flex ] has-min-width">Flex item content 3</div>
      <div class="[ flex-item ] u-1/3">Flex item content 4</div>
      <div class="[ flex-item flex-item--flex ] has-min-width">Flex item content 5</div>
    </div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

// container, acts as parent element
// since there are two base display modes for flex
// we'll use either .flex-block or .flex-inline as
// block-level classes. With no width property explicitly set
// it will take up all width of parent element.

// 1. Default flexbox, behaves similar to display: block;
// 2. flexbox equivalent of display: inline-block; When no width
//    explicitly set, it will be wide as it's content is
// 3. Normally, flexbox is single-line, but this allows it to break
//    and continue on next line if there isn't enough space 
//    for all elements in one line

.flex {
  border: 1px solid red;
  
  &-block {
    display: flex; // [1]
  }
  
  &-inline {
    display: inline-flex; // [2]
  }
  
  &--reverse {
    flex-direction: row-reverse; 
  }
  
  &--vertical {
    flex-direction: column;
  }
  
  &--vertical-reverse {
    flex-direction: column-reverse; 
  }
  
  &--multiline {
    flex-flow: row wrap; // [3]
  }
}

// .flexbox-item as base class isn't necessary, as 
// any node in flexbox container implicitly behaves as one.
// even text-only node get implicit wrapper, similar to 
// elements with display: table-cell;

// 1. renders the item invisible, while retaining it's
//    content box, practically the same as visibility: hidden
// 2. makes element stretchy - otherwise, without explicitly set
//    widths, element will be wide as it's its content
// 3. when setting order -1, it is essentialy as saying 
//    'this item comes before the first one'. when multiple
//    items have order: -1, the one which comes first in markup
//    will take precedence
.flex-item {
  padding: 5px;
  border: 1px solid ;
  
  &--collapsed {
    visibility: collapse; // [1]
  }
  &--flex {
    flex: 1; // [2]
  }
  &--first {
    order: -1; // [3]
  }
}
  
* {
  box-sizing: border-box;
}

.has-min-width {
  min-width: 30%;
}
.container {
  margin-bottom: 10px;
}

// quick witdhs classes
@for $i from 1 through 10 {
  @for $j from 1 through 10 {
    @if $i < $j {
      .u-#{$i}\/#{$j} {
        width: $i * 100 / $j * 1%;
      }
    }
  }
}

.box-vertical {
  height: 400px;
}

SassMeister-output.css

.flex {
  border: 1px solid red;
}
.flex-block {
  display: flex;
}
.flex-inline {
  display: inline-flex;
}
.flex--reverse {
  flex-direction: row-reverse;
}
.flex--vertical {
  flex-direction: column;
}
.flex--vertical-reverse {
  flex-direction: column-reverse;
}
.flex--multiline {
  flex-flow: row wrap;
}

.flex-item {
  padding: 5px;
  border: 1px solid;
}
.flex-item--collapsed {
  visibility: collapse;
}
.flex-item--flex {
  flex: 1;
}
.flex-item--first {
  order: -1;
}

* {
  box-sizing: border-box;
}

.has-min-width {
  min-width: 30%;
}

.container {
  margin-bottom: 10px;
}

.u-1\/2 {
  width: 50%;
}

.u-1\/3 {
  width: 33.33333%;
}

.u-1\/4 {
  width: 25%;
}

.u-1\/5 {
  width: 20%;
}

.u-1\/6 {
  width: 16.66667%;
}

.u-1\/7 {
  width: 14.28571%;
}

.u-1\/8 {
  width: 12.5%;
}

.u-1\/9 {
  width: 11.11111%;
}

.u-1\/10 {
  width: 10%;
}

.u-2\/3 {
  width: 66.66667%;
}

.u-2\/4 {
  width: 50%;
}

.u-2\/5 {
  width: 40%;
}

.u-2\/6 {
  width: 33.33333%;
}

.u-2\/7 {
  width: 28.57143%;
}

.u-2\/8 {
  width: 25%;
}

.u-2\/9 {
  width: 22.22222%;
}

.u-2\/10 {
  width: 20%;
}

.u-3\/4 {
  width: 75%;
}

.u-3\/5 {
  width: 60%;
}

.u-3\/6 {
  width: 50%;
}

.u-3\/7 {
  width: 42.85714%;
}

.u-3\/8 {
  width: 37.5%;
}

.u-3\/9 {
  width: 33.33333%;
}

.u-3\/10 {
  width: 30%;
}

.u-4\/5 {
  width: 80%;
}

.u-4\/6 {
  width: 66.66667%;
}

.u-4\/7 {
  width: 57.14286%;
}

.u-4\/8 {
  width: 50%;
}

.u-4\/9 {
  width: 44.44444%;
}

.u-4\/10 {
  width: 40%;
}

.u-5\/6 {
  width: 83.33333%;
}

.u-5\/7 {
  width: 71.42857%;
}

.u-5\/8 {
  width: 62.5%;
}

.u-5\/9 {
  width: 55.55556%;
}

.u-5\/10 {
  width: 50%;
}

.u-6\/7 {
  width: 85.71429%;
}

.u-6\/8 {
  width: 75%;
}

.u-6\/9 {
  width: 66.66667%;
}

.u-6\/10 {
  width: 60%;
}

.u-7\/8 {
  width: 87.5%;
}

.u-7\/9 {
  width: 77.77778%;
}

.u-7\/10 {
  width: 70%;
}

.u-8\/9 {
  width: 88.88889%;
}

.u-8\/10 {
  width: 80%;
}

.u-9\/10 {
  width: 90%;
}

.box-vertical {
  height: 400px;
}

SassMeister-rendered.html

<!-- 
  Classess related to flexbox are grouped within [ and ] symbols.
  These symbols' purpose is to make flex-related classes more visible
  and they don't have any other significance and meaning.
-->
<!-- REGULAR FLEXBOX -->
<div class="container">
  Regular flexbox
  <div class="flex [ flex-block ]">
    <div class="[ flex-item ]">
      Flex item content 1
    </div>
    <div class="[ flex-item ]">
      Flex item content 2
    </div>
    <div class="[ flex-item flex-item--flex ]">Flex item content 3</div>
    <div class="[ flex-item flex-item--first ]">Flex item collapsed 4</div>
    <div class="[ flex-item flex-item--first ]">Flex item content 5</div>
  </div>
</div>
<!-- FLEXBOX REVERSED -->
<div class="container">
  Reversed flexbox
  <div class="flex [ flex-block flex--reverse ]">
    <div class="[ flex-item ] u-1/2">
      Flex item content 1
    </div>
    <div class="[ flex-item ]">
      Flex item content 2
    </div>
    <div class="[ flex-item ]">Flex item content 3</div>
    <div class="[ flex-item ]">Flex item content 4</div>
    <div class="[ flex-item ]">Flex item content 5</div>
  </div>
</div>
<!-- nested flexboxes -->
<div class="[ flex-block ]">
  <!-- FLEXBOX vertical -->
  <div class="container u-1/2">
    Vertical flexbox
    <div class="flex box-vertical [ flex-block flex--vertical ]">
      <div class="[ flex-item ]">
        Flex item content 1
      </div>
      <div class="[ flex-item ]">
        Flex item content 2
      </div>
      <div class="[ flex-item flex-item--flex ]">Flex item content 3</div>
      <div class="[ flex-item ]">Flex item content 4</div>
      <div class="[ flex-item ]">Flex item content 5</div>
    </div>
  </div>
  <!-- FLEXBOX vertical reversed -->
  <div class="container u-1/2">
    Vertical Reversed flexbox
    <div class="flex box-vertical [ flex-block flex--vertical-reverse ]">
      <div class="[ flex-item ]">
        Flex item content 1
      </div>
      <div class="[ flex-item ]">
        Flex item content 2
      </div>
      <div class="[ flex-item flex-item--flex ]">Flex item content 3</div>
      <div class="[ flex-item ]">Flex item content 4</div>
      <div class="[ flex-item ]">Flex item content 5</div>
    </div>
  </div>
</div>
 <!-- FLEXBOX wrapping -->
  <div class="container u-8/10">
    Flexbox with wrapping 
    <div class="flex box-vertical [ flex-block flex--multiline ]">
      <div class="[ flex-item ]">
        Flex item content 1
      </div>
      <div class="[ flex-item ] u-1/2">
        Flex item content 2
      </div>
      <div class="[ flex-item flex-item--flex ] has-min-width">Flex item content 3</div>
      <div class="[ flex-item ] u-1/3">Flex item content 4</div>
      <div class="[ flex-item flex-item--flex ] has-min-width">Flex item content 5</div>
    </div>
  </div>
</div>