JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
  <header>
    Header
  </header>
  <main>
    Main
  </main>
  <footer>
    Footer
  </footer>

CSS

/* The new <main> is not styled in the UA stylesheet for IE10, so we need to set it to display block */
main {
  display: block;
}

.flexboxtweener, .flexboxtweener>body {
  height: 100%;
}

body {
  font-family: Monaco, Consolas, monospaced;
  min-height: 100vh;
  
  /**
  * Making the <body> element behave like a flexbox container:
  */
  
  /* Ye Olde Flexbox for Webkit */
  display: -webkit-box;
  /* Tweener flexbox */
  display: -ms-flexbox;
  /* Prefixed "new flexbox" */
  display: -webkit-flex;
  /* unprefixed standard "new flexbox" version */
  display: flex;
  
  /**
  * Making the things inside <body> line up vertically
  */
  
  /* Your grandparents flexbox for Webkit */
  -webkit-box-orient: vertical;
  /* Prefixed new syntax: */
  -webkit-flex-direction: column;
  /* Same syntax for weird IE tweener */
  -ms-flex-direction: column;
  /* unprefixed new syntax */
  flex-direction: column;
  padding: 0;
  margin: 0;
}

header {
  background-color: #ccc;
}
header h1 {
  margin: 0;
  padding: 1rem;
}

main {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
  padding: 1rem;
}


footer {
  background-color: yellow;
}

JavaScript

Modernizr.addTest('flexboxtweener', Modernizr.testAllProps('flexAlign', 'end', true));