title: Align Images (without columns) so that the new row starts at the most upper possible position
body: <p>I want to align multiple images / boxes in the follwoing way:</p>
  
  <pre><code>...
  &lt;img  width="200"
    src="http://www.passmark.com/images/monitortestscreenshot5.gif" /&gt;
  
  &lt;img  width="250"
    src="http://www.passmark.com/images/monitortestscreenshot5.gif" /&gt;
  ...
  </code></pre>
  
  <p>Fiddle: <a href="https://jsfiddle.net/1eaxc7kr/2/" rel="nofollow">https://jsfiddle.net/1eaxc7kr/2/</a></p>
  
  <p>My problem with the shown fiddle is, that new elements in the second row should not have a margin to the upper element if they do not need to.</p>
  
  <p>For example the first image of the second row (might depend on screen width) should be a directly below the very first element of the first row. </p>
  
  <p>I tried using flexboxes but I somehow failed on finding a good way.</p>
  
  <p>Here's what i tried:</p>
  
  <pre><code>img {
    vertical-align: top;
    display: inline-flex;
  } 
  
  .container {
    align-items: flex-start;
  }
  </code></pre>