dylanburkey
3/21/2013 - 12:55 AM

A CodePen by Dylan Burkey. Flex Box Layout - Mobile Ready - Layout built using flexbox.

A CodePen by Dylan Burkey. Flex Box Layout - Mobile Ready - Layout built using flexbox.

style.css
content_copyfile_download
*{
  box-sizing: border-box;
}
body {
 font-size: 100%;
 line-height: 1.4;
 font-family: sans-serif, helvetica;
 color: #444;
}
  #main {
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
  
  #main > article {
   margin: 4px;
   padding: 5px;
   background: #e6e7e8;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }
   
  #main > nav {
   margin: 4px;
   padding: 5px;
   background: #fff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: q;
   }
   
  #main > aside {
   margin: 4px;
   padding: 5px;
   background: #e6e7e8;
  color: #444;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }
span.o {
 color: #f67;
  font-weight:300;
}
 
  header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
      color: #222;
   background: #e6e7e8;
   }
    header nav[role="navigation"] ul {
     background: #F67; 
    width:100%;
height: 3em;
padding: 10px 0px 10px 0px; 
  color: #111;
    
  }
ul {
  margin-left:0;
  padding-left: 0;
  display: block;
}

ul li {
float:left;
  width:10%;
  font-weight: 900;
  font-variant: small-caps;
}

ul li:first-child {
 margin-left:20px; 
}
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
body {
   background:#888; 
  }
   #main, #page {
    -webkit-flex-flow: column;
            flex-flow: 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;
   }
  }

h1,h2,h3,h4,h5,h6 {
 margin: 2px;
 padding: 0;

}
 h1 {
 font-size: xx-large;
  font-weight: 200;
}
h2,h3 {
 font-size: large; 
  font-weight:200;
}
header nav[role="navigation"] ul {
        background: #F67; 
    width:100%;
height: 3em;
  color: #111;
    
  }
ul {
  margin-left:0;
  padding-left: 0;
}

ul li {
  padding: 0 0 40px 0;
  margin-left:5px;
  width:10%;
  height: 2em;
  display: block;
  font-weight: 900;
  text-align: center;
  font-variant: small-caps;
}
ul#sub {
 width: 100%;
  margin: 20px 0px 20px 0px;
  display: block;
  height: 2em;
  clear: both;
 
}

h6,li,p {
 font-size: small; 
}

article h2 {
  margin-left:15px;
}
p {
  padding: 15px;
}
header > h1 {
 padding-left: 12px; 
}
index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
  <head>
  
  </head>
  <body>
 <header>
   <h1 role="banner"><span class="o">flexbox</span>layout</h1>
    <nav role="navigation">
        <ul id="sub">
          <li>home</li>
          <li>about</li>
      </ul>
   </nav>
    </header>
 <div id='main'>
    <article role="main">
      <h2>created using flex box</h2>
       <p><strong>the entire layout is built using flex-box. The entire layout is also mobile ready.</strong></p>
   </article>
    <nav>nav</nav>
    <aside>aside</aside>
 </div>
    <footer><h4>footer</h4></footer>
  </body>
</html>