title: flex-pack at webkit
body: <p>On web exists information about CSS3 <code>box</code>, <code>flexbox</code> and <code>flex</code>. From what I understand, the <code>flex</code> is the current <em>draft</em> method, for now. So on webkit we use <code>display: -webkit-flex</code>, <code>-webkit-flex: 1 auto</code>...</p>
  
  <p>But my question is: how I can use something like <code>box-pack: start</code> on <code>flex</code>?</p>
  
  <p>Take a look in <a href="http://jsfiddle.net/Fzsav/" rel="nofollow"><strong>this example</strong></a> (webkit only). I need pack it to top, but it is spreading. It'll be similar to <a href="http://jsfiddle.net/cKStN/" rel="nofollow"><strong>this hackish example</strong></a> (but not is good for my case, hard to maintance). How I can fix that?</p>
  
  <h1>NEED TO FIX</h1>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="body"&gt;
      &lt;h1&gt;Test&lt;/h1&gt;
      &lt;div class="box" style="width: 80%"&gt;&lt;/div&gt;
      &lt;div class="box" style="width: 20%"&gt;&lt;/div&gt;
      &lt;div class="box" style="width: 20%"&gt;&lt;/div&gt;
      &lt;div class="box" style="width: 20%"&gt;&lt;/div&gt;
      &lt;!-- (NEED TO FIX) EMPTY SPACE --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>h1 {
      -webkit-flex: 1 100%;
  }
  
  .body {
      display: -webkit-flex;
      -webkit-flex-direction: row;
      -webkit-flex-wrap: wrap;
      height: 400px;
  }
  </code></pre>
  
  <p>So note that <code>h1</code> need use all space from <em>line 1</em>, 2nd and 3rd <code>.box</code> will go to <em>line 2</em>, 4th and 5th <code>.box</code> on <em>line 3</em> and <em>I need</em> that the <code>.body</code> (that is bigger than content, in <em>height</em>) have a empty space on bottom.</p>
  
  <h1>HACKISH SOLUTION :-(</h1>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="body"&gt;
      &lt;h1 style="height: 40px;"&gt;Test&lt;/h1&gt;
      &lt;div class="box" style="width: 80%; height: 20px;"&gt;&lt;/div&gt;
      &lt;div class="box" style="width: 20%; height: 20px;"&gt;&lt;/div&gt;
      &lt;div class="box" style="width: 20%; height: 20px;"&gt;&lt;/div&gt;
      &lt;div class="box" style="width: 20%; height: 20px;"&gt;&lt;/div&gt;
      &lt;div class="hackish"&gt;&lt;/div&gt;
      &lt;!-- NOTE THIS .hackish :-( --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.hackish {
      width: 100%;
      height: 100%;
  }
  </code></pre>
  
  <p>So, some solution?</p>