title: Flexbox justified grid
body: <p>I am triyng ot create same basic justified grid with flexbox. If I lay some images and applay flex wrap it looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrap {
    display: flex;
    flex-wrap: wrap;
    max-width: 800px;
  }
  
  .box {
    margin: 1px;
    position: relative;
    text-align: center;
    height: 100%;
  }
  
  img {
    position: relative;
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrap"&gt;
    &lt;div class="box"&gt;&lt;img src="https://via.placeholder.com/250x150" /&gt;&lt;/div&gt;
    &lt;div class="box"&gt;&lt;img src="https://via.placeholder.com/400x150" /&gt;&lt;/div&gt;
    &lt;div class="box"&gt;&lt;img src="https://via.placeholder.com/500x150" /&gt;&lt;/div&gt;
    &lt;div class="box"&gt;&lt;img src="https://via.placeholder.com/150x150" /&gt;&lt;/div&gt;
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This work well, but as soon as avalable width gets smaller images fall into new line (because of wrap obviously). I am wondering can this be made responsive so it keeps this layout regardless of available width? But it would need to be dynamic without applying individual classes to images with custom css.</p>
  
  <p>Or this cannot be done without javascript?</p>