CodePen

HTML

            
              <h1>First Example</h1>

<div class="wrapper">
  <div class="a">
    <div>a</div>
  </div>
  
  <div class="b">
    <div>b</div>
  </div>
  
  <div class="c">
    <div>c</div>
  </div>
</div>

<h1>Second Example</h1>

<div class="wrapper">
  <div class="a">
    <div>a</div>
    <div>a</div>
    <div>a</div>
  </div>
  
  <div class="b">
    <div>b</div>
  </div>
  
  <div class="c">
    <div>c</div>
    <div>c</div>
  </div>
</div>

<h1>Third Example</h1>

<div class="wrapper">
  <div class="a">
    <div>a</div>
    <div>a</div>
  </div>
  
  <div class="b">
    <div>b</div>
  </div>
  
  <div class="c">
    <div>c</div>
    <div>c</div>
    <div>c</div>
  </div>
</div>

<h1>Freestylin'!</h1>

<div class="wrapper">
  <div class="a">
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
  </div>
  
  <div class="b">
    <div>b</div>
    <div>b</div>
  </div>
  
  <div class="c">
    <div>c</div>
    <div>c</div>
    <div>c</div>
  </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              $flex-wrap-required: true;

.wrapper {
  @include display-flex;
}

.a, .b, .c {
  @include display-flex;
  @include flex-flow(row wrap);
}

.a div, .b div, .c div {
  border: 1px solid;
  @include flex(1 0 100%);
}

/* Fancy it up! */
.a {
  background: #ff9999;
  @include flex(1 1 10em);
}

.b {
  background: #00e600;
  @include flex(1 1 10em);
}

.c {
  background: #9999ff;
  @include flex(1 1 40%);
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................