Holy Grail Layout with flexbox

Holy Grail Layout with flexbox.markdown

Holy Grail Layout with flexbox

A Pen by Riccardo Scalco on CodePen.

License.

index.html

<header>header</header>
 <div id='main'>
    <article>article</article>
    <nav>nav</nav>
    <aside>aside</aside>
 </div>
 <footer>footer</footer>

style.css

#main {
  min-height: 800px;
  display: -webkit-flex;
  display:         flex;
  -webkit-flex-flow: row;
          flex-flow: row;
}
 
#main > article {
  background: #dddd88;
  -webkit-flex: 3 1 60%;
          flex: 3 1 60%;
  -webkit-order: 2;
          order: 2;
}
  
#main > nav {
  background: #ccccff;
  -webkit-flex: 1 6 20%;
          flex: 1 6 20%;
  -webkit-order: 1;
          order: 1;
}
  
#main > aside {
  background: #cc00ff;
  -webkit-flex: 1 6 20%;
          flex: 1 6 20%;
  -webkit-order: 3;
          order: 3;
}
 
header, footer {
  display: block;
  min-height: 100px;
  background: #ffeebb;
}
 
/* Too narrow to support three columns */
@media all and (max-width: 640px) {
  #main, #page {
    -webkit-flex-flow: column;
            flex-flow: column;
            flex-direction: column;
  }

  #main > article, #main > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
  }
  
  #main > nav, #main > aside, header, footer {
    min-height: 50px;
    max-height: 50px;
  }
}