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
  • …
 
<script src="//cdnjs.cloudflare.com/ajax/libs/phaser/2.0.5/phaser.min.js"></script>
<div class="container"> 
  <nav class="nav left">…</nav> 
​
  <section class="main"> 
​
​
    … 
​
​
  </section> 
​
<div class="flexbox">
    <p>I should be centered</p>
</div>
​
  <nav class="nav right">…</nav> 
​
​
</div>
​
 
html, body { height: 100%; background: lightgrey; margin: 0;}
    
    .container {
        display: -webkit-flex;
        display: flex;
        flex-flow: row;
        
        
        height: 100%;
        margin: auto;
        width:100%;
    }
​
.flexbox {
 
    width: 50%;
    height: 100px;
    background: orange;
}
 
.flexbox p {
    border: 1px solid green;
    padding: 5px;
}
    .header
    {
      width: 20%;
      margin: 30px;
      padding 20px;
      background: yellow;
      
    }
​
    .main {
        width: 55%;
        margin: 10px 0;
        padding: 0px;
        
        background: deepskyblue;
    }
    .left {
       -webkit-flex: 0;
       flex: 0;
    }
    .right {
       -webkit-flex: 1;
       flex: 1;
    }
    .nav {
       margin: 0px 0px;
       padding: 7px;
       
       background: hotpink; 
    }
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers