Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>
<body class="flex-container-column">
    <header>
        header
    </header><!-- end header -->
    
    <section class="flex-item flex-container-row">
      
      <nav>
        <ul>
          <li><a href="#">navi-list</a></li>
          <li><a href="#">navi-list</a></li>
          <li><a href="#">navi-list</a></li>
          <li><a href="#">navi-list</a></li>
        </ul>
      </nav>
      
      <article class="flex-item">
        It´s not optimaized for FireFox
      </article>
      
      <aside>
        side content
      </aside>
      <div class="clear"></div>
    </section><!-- end section -->
    
    <footer>
      footer
    </footer><!-- end footer -->
  
</body>
</html>
​
 
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
​
a {
  color: #FFFFFF;
}
​
.clear {
  clear: both;
}
​
.wrapper {
  height: 100%;
}
​
header {
  height: 30px;
  background: yellow;
}
​
section {
  background: blue;
}
​
section nav {
  width: 100px;
  background: red;
}
​
section article {
  background: grey;
}
​
section aside {
  width: 100px;
  background: green;
}
​
footer {
  height: 30px;
  background: black;
  color: #FFFFFF;
}
​
.flex-container-column {
    display: -ms-flex;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
  
    -ms-flex-direction: column;
    -ms-flex-wrap: wrap;
  
    -moz-flex-flow: column wrap;
    -webkit-flex-flow: column wrap;
  
    flex-flow: column wrap;
  
    -ms-flex-pack: start;
    -moz-justify-content: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
​
.flex-container-row {
    display: -ms-flex;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
  
    -ms-flex-direction: column;
    -ms-flex-wrap: wrap;
  
    -moz-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
  
    flex-flow: row wrap;
  
    -ms-flex-pack: start;
    -moz-justify-content: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
​
.flex-item {
    -ms-flex: 1 0 auto;
    -moz-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
  
    
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers