<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=""></a>. I've updated his to be in the SCSS flavor of Sass. If you dig it, <a href="">follow me on Twitter</a> for more cool sassy stuff.</p>
    <p> This whole deal stemmed from <a href="">Chris Coyier's Flexbox article</a>.</p>
  <nav class="main-nav">
      <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>
  <aside class="main-sidebar">
    <p>I am a rather effortless column of equal height.</p>


              @import "compass/css3";

/* 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-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;


Browser support

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

iOS any
Android any
Loading ..................