title: Flexbox wrap - different alignment for last row
body: <p>I'm using flex box to align two items to left and right of the container, while vertically centre-aligning them.  Here's a very simple example of what I'm trying to achieve.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="first"&gt;&lt;/div&gt;
      &lt;div class="second"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container {
      width:100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
  }
  
  .first {
      background-color: yellow;
      width: 200px;
      height: 100px;
  }
  
  .second {
      background-color: blue;
      width: 200px;
      height: 100px;
  }
  </code></pre>
  
  <p>Here's the <a href="http://jsfiddle.net/cncozfem/1/" rel="noreferrer">jsfiddle of the example</a>.</p>
  
  <p>This works perfectly well if the screen is wide enough to fit both internal divs on one row.  However when the screen size is small (e.g. a mobile phone) and the divs wrap onto the second line, the second one also becomes aligned to the left side (i.e. <code>flex-start</code>).  How can I force the second div to always be aligned against the right border, regardless of whether it's on the first row or wrapped onto the second one?</p>
  
  <p><strong>EDIT:</strong> In the example, I assigned fixed width to the two child elements - this is for simplicity only.  In the real life application, all widths are dynamically changing based on the content read from the database at run-time.  Hence, any solution that's based on fixed sizes will not work.</p>