JSFiddle - React, Tailwind, and code Playground

by Troy Johnson

HTML

<h2>&nbsp;</h2>
<h2>Flex Box</h2>

<p><strong>Here is a jsFiddle for <a href="http://jsfiddle.net/aalbc/t5ee15y2/">a simple Flexbox implementation</a></strong><br /><br />
<a href="http://jsfiddle.net/aalbc/t5ee15y2/"><img  class="img-responsive" style="border:0px" alt="js fiddle for flexbox" src="images/flexbox.jpg"></a></>
	<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<p><strong>Here is a more complicated flexbox, the code for this configuration is revealed in this page&rsquo;s source code (HTML and embedded CSS</strong><br /><br />



<div class="wrapper">
  <header class="header"><strong>Header (always on top)</strong></header>
  <article class="main">
    <p><strong>Main Content</strong></p>
    <p><a href="http://www.lipsum.com/">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Nam ullamcorper velit lorem, quis semper libero pharetra auctor. Morbi sit amet mauris dui. Sed ornare vehicula quam a gravida. Mauris fringilla lacus aliquet, rhoncus elit mattis, interdum orci. Aenean non nisi ullamcorper, maximus elit id, tempus velit. Fusce rhoncus, nisi vitae pulvinar laoreet, risus neque lobortis diam, id lacinia enim felis a velit. Etiam bibendum orci a ligula venenatis, quis lobortis nibh ultricies. Mauris sit amet molestie arcu, vitae commodo turpis. Suspendisse potenti. Suspendisse posuere purus tristique libero efficitur pharetra. Phasellus consequat lectus id risus ullamcorper blandit. Morbi sagittis diam nec lacus gravida suscipit. Suspendisse lobortis ante ut congue sodales. Sed augue dui, dapibus ut risus mattis, porttitor varius turpis. Pellentesque et diam consectetur, malesuada massa eget, venenatis eros.

    <p>Duis iaculis mauris sit amet congue accumsan. Aliquam dictum tortor at nisl finibus sollicitudin. Morbi commodo lacinia auctor. Nulla facilisi. Integer consectetur volutpat tincidunt. Aliquam aliquam diam massa, vel elementum sapien pretium semper. Sed ac erat quam. Fusce hendrerit, leo at euismod volutpat, leo elit consectetur...

CSS

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}
.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  font-weight: normal;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: black;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

@media all and (min-width: 600px) {
  .aside {
    flex: 1 auto;
  }
}
@media all and (min-width: 800px) {
  .main {
    flex: 3 0px;
  }

  .aside-1 {
    order: 1;
  }

  .main {
    order: 2;
  }

  .aside-2 {
    order: 3;
  }

  .footer {
    order: 4;
  }
}
body {
  padding: 2em;
}