title: Is it possible to implement a Flickr-like justified gallery in pure CSS?
body: <p>I've been using <a href="http://miromannino.github.io/Justified-Gallery/" rel="nofollow noreferrer">miromannino.github.io</a> as gallery layout for a few pages and recently I've been trying to figure out if it's possible to do this in raw CSS, potentially with flexbox.</p>
  
  <p>The problem is in the varying horizontal and vertical pictures and that they should always fill 100% of the container width. The closest I got was:</p>
  
  <pre><code>.jgal {
    max-width: 90vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0 auto;
    align-items: flex-start;
  }
  
  .jgalimg {
    display: block;
    align-self: flex-start;
    max-height: 40vh;
    max-width: 100vw;
    width: auto;
    height: auto;
  }
  </code></pre>
  
  <p>on a layout like:</p>
  
  <pre><code>&lt;div class="jgal"&gt;
      &lt;a class="jgallink" href="url-to-img.jpg"&gt;
          &lt;img class="jgalimg hor" src="url-to-thumb.jpg" width="640" height="480" /&gt;
      &lt;/a&gt;
      &lt;a class="jgallink" href="url-to-img-2.jpg"&gt;
          &lt;img class="jgalimg ver" src="url-to-thumb-2.jpg" width="480" height="640" /&gt;
      &lt;/a&gt;
      [ ... ]
  &lt;/div&gt;
  </code></pre>
  
  <p>I have the sizes and the orientation as class. I've tried using </p>
  
  <pre><code>align-content: stretch;
  align-items: stretch;
  </code></pre>
  
  <p>but then aligning the image size to the a tag becomes tricky.</p>
  
  <p>So, any ideas? :)</p>