Flexbox

by lakshmipathi

HTML

<header>
     <h1>Responsive Layout using Flexbox</h1>
</header>

<div id="main">
    <article>
        <p>article</p>
     <figure>
         <div style="height:200px;overflow:hidden">
             <img src="http://farm6.staticflickr.com/5156/7079514961_f5cfa58731_z.jpg"/></div>
          <figcaption>http://www.flickr.com/photos/72116883@N00/7079514961</figcaption>
      </figure>
        
      <p>Barleywine lagering dunkle. sparge. wit berliner weisse brew brewing heat exchanger? all-malt dunkle hand pump lauter tun shelf life. ibu, all-malt, hops anaerobic, specific gravity? cask conditioning, barley sparge sparge dry hopping hop back adjunct anaerobic; biere de garde. wheat beer glass black malt oxidized shelf life additive attenuation bacterial bung microbrewery.</p>
    </article>
    <nav>nav</nav>
    <aside>aside</aside>
</div>
<footer>
MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
</footer>

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 1em;
    font-family: "Helvetica Neue", "HelveticaNeue", "Helvetica", "Arial", sans-serif;
}
h1 {
    font-weight: normal;
    text-align: center;
}
p {
    margin: 0 0 1em 0;
}
figure {
    margin: 1em 0;
}
figcaption {
    font-style: italic;
    font-size: .5em;
} 
figure img {
    max-width: 100%;
}
#main {
   margin: 0;
   padding: 0;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row;
   flex-flow: row;
}
 
#main > article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
}
  
#main > nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
}
  
#main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
}
 
header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 80px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
}
 
/* Too narrow to support three columns */
  @media all and (max-width: 640px) {
  
   #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;
  
   }
}