отаю над галереей изображений на старом сайте. Я не могу использовать ничего, кроме обычного старого HTML / jQuery или JS / CSS. Я знаю, что это будет намного проще с Bootstrap или какой-нибудь сеткой.

Я строю это с flexbox. В каждом ряду четыре изображения, с несколькими рядами. Это выглядит великолепно, когда в каждом ряду есть четыре изображения. Когда у него 2 или 3, потому что я используюjustify-content: space-betweenЭто выглядит странно из-за большого разрыва между изображениями.

Причина я используюspace-between заключается в том, что я хочу, чтобы изображения были выровнены слева от родительского контейнера, а также справа.

Некоторые заметки:

Максимальная ширина каждого гибкого элемента составляет 150 пикселейЯ хочу поле между элементами, но мне все равно, изменяется ли это поле при изменении ширины области просмотрамаксимальная ширина гибкого контейнера позволяет размещать только четыре элемента шириной 150 пикселей

Мой вопрос: если в строке меньше набора элементов (в данном случае четыре), могу ли я изменитьjustify-content чтобы быть чем-то более подходящим, какflex-start?

В идеале я хочу сделать это без JavaScript / jQuery, но если это невозможно, я также открыт для этих решений.

Кроме того, не стесняйтесь, дайте мне знать, если я слишком обдумываю это и даже не нужно использоватьjustify-content: space-between, Вот рабочий пример:

/* 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;
}

<div class="flex-container">
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 1</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 2</p>      
    </div>
    
   <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 3</p>      
    </div>
    
    <div class="thumb-grid">
      <div class="img-block">       
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 4</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 5</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 6</p>      
    </div>
    
   <div class="thumb-grid">      
      <div class="img-block">
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 7</p>      
    </div>
    
  </div>