CodePen

HTML

            
              <div class="page-wrap">
  
  <section class="main-content">
    <h1>Converting Ben Smithett's Sass Flexbox Mixin to SCSS</h1>
    <p><strong>I'm first in the source order.</strong></p>
    <p>Ben's original Sass based Mixin can be found at <a href="http://codepen.io/bensmithett/pen/neuyI">http://codepen.io/bensmithett/pen/neuyI</a>. I've updated his to be in the SCSS flavor of Sass. If you dig it, <a href="https://twitter.com/adamj_design">follow me on Twitter</a> for more cool sassy stuff.</p>
    <p> This whole deal stemmed from <a href="http://css-tricks.com/using-flexbox/">Chris Coyier's Flexbox article</a>.</p>
  </section>
  
  <nav class="main-nav">
    <h2>Nav</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
  
  <aside class="main-sidebar">
    <h2>Sidebar</h2>
    <p>I am a rather effortless column of equal height.</p>
  </aside>
    
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /* Mixins */
@mixin flexbox-display-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin flexbox-flex($width) {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  width: $width; // Passing our width value here
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
@mixin flexbox-order($order) {
  -webkit-box-ordinal-group: $order;
  -moz-box-ordinal-group: $order;
  -ms-flex-order: $order;
  -webkit-order: $order;
  order: $order;
}
/* Example */
.page-wrap {
  @include flexbox-display-flex;
}
.main-content {
  @include flexbox-order(2);
  width: 60%;
  -moz-box-flex: 1;
  background: white;
}
.main-nav {
  @include flexbox-order(1);
  @include flexbox-flex(20%);
  background: #ccc;
}
.main-sidebar {
  @include flexbox-order(3);
  @include flexbox-flex(20%);
  background: #ccc;
}
/* Extra styling stuff, you can safely delete everything below this line for your projects */
.main-content,
.main-sidebar,
.main-nav {
  padding: 1em;
}
body {
  padding: 2em;
  background: #79a693;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
h1, h2 {
  font: bold 2em Sans-Serif;
  margin: 0 0 1em 0;
}
h2 {
  font-size: 1.5em;
}
p {
  margin: 0 0 1em 0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /* 
Browser support

Chrome any
Firefox any
Safari any
Opera 12.1+
IE 10+

iOS any
Android any
*/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................