title: force last div on a new line with flexbox
body: <p>I have this HTML</p>
  
  <pre><code>&lt;div class="wrap"&gt;
       &lt;div class="one"&gt;&lt;/div&gt;
       &lt;div class="two"&gt;&lt;/div&gt;
       &lt;div class="three"&gt;&lt;/div&gt;
       &lt;div class="four"&gt;&lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>plus this CSS</p>
  
  <pre><code>.wrap {
      display: flex;
      align-items: center;
  }
  
  .one {
      flex: 0 1 200px;
  }
  
  .two {
      display: flex;
      flex: 1 1 auto;
      align-items: center;
      justify-content: center;
  }
  
  .three {
      display: flex;
      flex: 0 1 200px;
      justify-content: flex-end;
  }
  
  .four {
      ???
  }
  </code></pre>
  
  <p>and i wanna make it look like this, i don't know what else to use for .four to make that last div to move on a new line plus 100% width</p>
  
  <pre><code>[- one -----][----- two -----][----- three -]
  [----------------- four --------------------]
  </code></pre>
  
  <p>atm looks like this</p>
  
  <pre><code>[- one -----][----- two -----][----- three -] [- four -----]
  </code></pre>
  
  <p>i know i can use another </p>
  
  <pre><code>&lt;div class="wrap"&gt;
  </code></pre>
  
  <p>but i don't want this,
  Thank you.</p>