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>CSS Flexbox prototype</title>
    
  <style>
    
  body {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    }
​
  .row {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: -ie-box;
    display: box;
    display: flexbox; 
    }
  
    /*
    
    The syntax for flexbox has changed: 
    http://www.w3.org/TR/css3-flexbox/#display-flexbox so I'm adding 
    both with the most up to date version at the bottom so this gets 
    supported on new browsers. Browsers that still only understand 
    display:box will ignore this. 
      
    Opera don't seem to currently support Flexbox yet: 
    http://my.opera.com/karlcow/blog/2011/09/09/flexbox-implementation
    and neither does IE, but I put prefixes in anyway just in case they 
    start to.
      
    See full list of browser support here: http://caniuse.com/flexbox
      
    */
 
  .column {
    background-color: #EEE;
    border: 2px dashed #CCC;
    margin: 10px;
    padding:10px;
    -webkit-box-flex: 1;
    -webkit-flex-box: 1;
    -moz-box-flex: 1;
    -moz-flex-box: 1;
    -o-box-flex: 1;
    -o-flex-box: 1;
    -ie-box-flex: 1;
    -ie-flex-box: 1;
    box-flex: 1;
    flex-box: 1;
    width:0;
    }
 
    /* 
    
    width:0; is a hack to force equal widths. I wanted to use % but
    Flexbox doesn't currently support % based widths, so to degrade 
    gracefully on browsers that don't support flexbox, you should specify 
    a suitable fixed width for your content here. 
    
    Great article mentions more limitations of current implementation of 
    flexbox here: http://oli.jp/2011/css3-flexbox/
    
    All boxes in rows are equal widths, but it is possible to make them
    different sizes: http://flexiejs.com/playground/
    
    */
   
  
  @media (max-width:600px)  {
    
    /* 
    Linearises the content if the viewport width 
    is less than the max-width. 
    */
    
  .row {
    display: block;
    }
​
  .column {
    -webkit-box-flex: 0;
    -webkit-flex-box: 0;
    -moz-box-flex: 0;
    -moz-flex-box: 0;
    -o-box-flex: 0;
    -o-flex-box: 0;
    -ie-box-flex: 0;
    -ie-flex-box: 0;
    box-flex: 0;
    flex-box: 0;
    width: auto;
    }
​
  }
          
  </style>
​
</head>
  
<body>
  
  <h1>Flexbox prototype</h1>
  
  <p>This is an example of how you can use Flexbox to make prototypes. Layout linearises at 600px.</p>
  <p><small>Author: <a href="http://maban.co.uk">Anna Debenham</a>. Please share this code under Creative Commons.</small></p>
  <!-- Unsemantic classnames used to make it clear what's going on. -->
  
  <!-- One column -->
  <div class="row">
    <div class="column">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
  </div>
  
  <!-- Two columns -->
  <div class="row">
    <div class="column">
      <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
    </div>   
    <div class="column">
      <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
    </div>
  </div>
  
  <!-- Three columns -->
  <div class="row">
    <div class="column">
      <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
    </div>
    <div class="column">
      <p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>
    </div>
    <div class="column">
      <p>Praesent dapibus, neque id cursus f aucibus.</p>
    </div>
  </div>
  
  <!-- Four columns -->
  <div class="row">
    <div class="column">
      <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
    </div>
    <div class="column">
      <p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>
    </div>
    <div class="column">
      <p>Praesent dapibus, neque id cursus f aucibus.</p>
    </div>
    <div class="column">
      <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
    </div>
  </div>
   
</body>
​
</html>
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers