title: Can I change the "justify-content" value depending on the number of elements in the flex container?
body: <p>I am working on an image gallery on a legacy site. I can't use anything other than regular old HTML/jQuery or JS/CSS. I know this would be a lot easier with Bootstrap or some grid library.</p>
  
  <p>I'm building it with flexbox. There are four images in each row, with multiple rows. It looks great when each row has its four images. When it has 2 or 3, because I am using <code>justify-content: space-between</code>, it makes it look weird because of the big gap between the images.</p>
  
  <p>The reason I'm using <code>space-between</code> is that I want the images to align to the left of the parent container, and also to the right.</p>
  
  <p><strong>Some notes</strong>:</p>
  
  <ul>
  <li>Each flex item has a max-width of 150px</li>
  <li>I want a margin between items, but I don't care if this margin changes as the viewport width changes</li>
  <li>the flex container has a max width that only allows four 150px-wide items in a row</li>
  </ul>
  
  <p>My question: if a row has less than a set # of elements (in this case four), can I change the <code>justify-content</code> to be something more appropriate, like <code>flex-start</code>?</p>
  
  <p>Ideally, I want to do this without JavaScript/jQuery, but if that's impossible, I'm open to those solutions as well.</p>
  
  <p>Also, feel free to let me know if I'm way overthinking this and don't even need to use <code>justify-content: space-between</code>.
  Here's a working example:</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>/* outer container */
  .flex-container {
    padding: 24px 0;
    background: white;
    border: solid 1px rgba(0,0,0,.1);
    max-width: 700px; /* or whatever */
    
    /* flex props */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  /* contains img block and title */
  .thumb-grid {
    border: solid 1px rgba(0,0,0,.1);
    width: 150px;
    margin-bottom: 36px;
  }
  
  .thumb-grid:first-of-type { margin-left: 0; }
  .thumb-grid:nth-of-type(4) { margin-right: 0; }
  
  .thumb-grid p {
    text-align: center;
  }
  
  .img-block {
    background: black;
    height: 150px;
  }
  
  .img-block img {
    height: 150px;
    opacity: 1;
    transition: opacity 150ms;
  }
  
  .img-block:hover img {
    opacity: .9;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-container"&gt;
      
      &lt;div class="thumb-grid"&gt;      
        &lt;div class="img-block"&gt;        
          &lt;a href=""&gt;&lt;img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"&gt;&lt;/a&gt;        
        &lt;/div&gt;      
        &lt;p&gt;Image 1&lt;/p&gt;      
      &lt;/div&gt;
      
      &lt;div class="thumb-grid"&gt;      
        &lt;div class="img-block"&gt;        
          &lt;a href=""&gt;&lt;img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"&gt;&lt;/a&gt;        
        &lt;/div&gt;      
        &lt;p&gt;Image 2&lt;/p&gt;      
      &lt;/div&gt;
      
     &lt;div class="thumb-grid"&gt;      
        &lt;div class="img-block"&gt;        
          &lt;a href=""&gt;&lt;img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"&gt;&lt;/a&gt;        
        &lt;/div&gt;      
        &lt;p&gt;Image 3&lt;/p&gt;      
      &lt;/div&gt;
      
      &lt;div class="thumb-grid"&gt;
        &lt;div class="img-block"&gt;       
          &lt;a href=""&gt;&lt;img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"&gt;&lt;/a&gt;        
        &lt;/div&gt;      
        &lt;p&gt;Image 4&lt;/p&gt;      
      &lt;/div&gt;
      
      &lt;div class="thumb-grid"&gt;      
        &lt;div class="img-block"&gt;        
          &lt;a href=""&gt;&lt;img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"&gt;&lt;/a&gt;        
        &lt;/div&gt;      
        &lt;p&gt;Image 5&lt;/p&gt;      
      &lt;/div&gt;
      
      &lt;div class="thumb-grid"&gt;      
        &lt;div class="img-block"&gt;        
          &lt;a href=""&gt;&lt;img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"&gt;&lt;/a&gt;        
        &lt;/div&gt;      
        &lt;p&gt;Image 6&lt;/p&gt;      
      &lt;/div&gt;
      
     &lt;div class="thumb-grid"&gt;      
        &lt;div class="img-block"&gt;
          &lt;a href=""&gt;&lt;img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"&gt;&lt;/a&gt;        
        &lt;/div&gt;      
        &lt;p&gt;Image 7&lt;/p&gt;      
      &lt;/div&gt;
      
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>