title: flexbox and wrap property
body: <p>I am developing and app with phonegap. I wanted to use the flexbox to layout some buttons in my main application area.</p>
  
  <p>Can somebody explain why this <a href="http://jsfiddle.net/apYLB/" rel="nofollow">http://jsfiddle.net/apYLB/</a> doesn't wrap elements in latest chrome?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="flex-container"&gt;
      &lt;div class="flex-item"&gt;1&lt;/div&gt;
      &lt;div class="flex-item"&gt;2&lt;/div&gt;
      &lt;div class="flex-item"&gt;3&lt;/div&gt;
      &lt;div class="flex-item"&gt;4&lt;/div&gt;
      &lt;div class="flex-item"&gt;5&lt;/div&gt;
      &lt;div class="flex-item"&gt;6&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.flex-container {
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      -webkit-flex-direction: row;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
      -webkit-box-align: end;
      -moz-box-align: end;
      box-align: end;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      box-pack: center;
      justify-content:space-around;
      height:100%;
  }
  .flex-item {
      margin:0 10px 25px 0;
      width:86px;
      border:1px solid #000;
  }
  .flex-item img {
      max-height:80px;
  }
  </code></pre>
  
  <p>They are laid horizzontally and only 3 and a half boxes appear.</p>