Generated by SassMeister.com.

SassMeister-input-HTML.html

<!-- REGULAR FLEXBOX -->
<div class="container">
  Regular flexbox
  <div class="flex flex-block">
    <div class="flex-item u-1/5">
      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--collapsed">Flex item collapsed 4</div>
    <div class="flex-item">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/5">
      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>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

* {
  box-sizing: border-box;
}
// container, acts as parent element
// since there are two base display modes for flex
// we'll use either 
.flex {
  border: 1px solid red;
  
  &-block {
    display: flex;
  }
  
  &-inline {
    display: flex-inline;
  }
  
  &--reverse {
    flex-direction: row-reverse;
  }
  
  &--column {
    flex-direction: column;
  }
  
  &--column-reverse {
    flex-direction: column-reversed;
  }
  
  &--multiline {
    flex-flow: row wrap;
  }
}
  
.container {
  margin-bottom: 10px;
}

.flex-item {
  padding: 5px;
  border: 1px solid ;
}

.flex-item {
  &--collapsed {
    // renders the item invisible, while retaining it's
    // content box, practically the same as visibility:hidden
    visibility: collapse;
  }
  &--flex {
    flex: 1;
  }
}
// quick witdhs classes
@for $i from 1 through 10 {
  .u-1\/#{$i} {
    width: $i * 10%;
  }
  .u-flex-#{i} {
    flex: $i;
  }
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

.flex {
  border: 1px solid red;
}

.flex-block {
  display: flex;
}

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

.flex--reverse {
  flex-direction: row-reverse;
}

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

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

.flex--multiline {
  flex-flow: row wrap;
}

.container {
  margin-bottom: 10px;
}

.flex-item {
  padding: 5px;
  border: 1px solid;
}

.flex-item--collapsed {
  visibility: collapse;
}

.flex-item--flex {
  flex: 1;
}

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

.u-flex-i {
  flex: 1;
}

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

.u-flex-i {
  flex: 2;
}

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

.u-flex-i {
  flex: 3;
}

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

.u-flex-i {
  flex: 4;
}

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

.u-flex-i {
  flex: 5;
}

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

.u-flex-i {
  flex: 6;
}

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

.u-flex-i {
  flex: 7;
}

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

.u-flex-i {
  flex: 8;
}

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

.u-flex-i {
  flex: 9;
}

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

.u-flex-i {
  flex: 10;
}

SassMeister-rendered.html

<!-- REGULAR FLEXBOX -->
<div class="container">
  Regular flexbox
  <div class="flex flex-block">
    <div class="flex-item u-1/5">
      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--collapsed">Flex item collapsed 4</div>
    <div class="flex-item">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/5">
      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>