Если это может быть динамическое количество элементов, например 3-5, до тех пор, пока мы не используем меньше, чем на 1 меньше, чем максимальное количество, это будет работать нормально.

отаю над галереей изображений на старом сайте. Я не могу использовать ничего, кроме обычного старого 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>

 kauffee00006 сент. 2017 г., 23:43
@TylerH Это просто излишество для того, что мне нужно. Это одна страница примерно 50+ на сайте.
 cjl75006 сент. 2017 г., 23:53
Этот ответ кажется, чтобы решить проблему.
 TylerH06 сент. 2017 г., 23:36
Если вы можете использовать JavaScript / jQuery, почему вы не можете использовать Bootstrap или другую библиотеку?
 cjl75006 сент. 2017 г., 23:52
 kauffee00007 сент. 2017 г., 16:15
Я обновил свой вопрос. Меня не волнует размер полей, но я действительно хочу поля.

Ответы на вопрос(4)

аже не будет существовать тогда. Вам не понадобятся какие-либо обходные пути или хаки, JavaScript или другие странные вещи, чтобы заставить его работать. С помощью CSS-макета вы легко добьетесь того, что вам нужно, с элегантным и понятным кодом.

Разметка CSS-сетки - это своего рода новая функция CSS, и на самом деле это первый законный способ создания разметки, который потрясающий. Читайте об этом:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layouthttps://css-tricks.com/snippets/css/complete-guide-grid/

Для вашего случая, особенно взгляните наauto-fill или жеauto-fit свойства. Вот еще одна полезная ссылка:https://gridbyexample.com/examples/example37/.

А вот краткий пример того, чего вы хотите достичь с помощью сетки CSS:https://codepen.io/anon/pen/YxbexQ?editors=1100, Посмотрите, как он реагирует на различную ширину экрана / контейнера. Это просто работает.

 TylerH06 сент. 2017 г., 23:47
Flexbox isn't really created for layout. Это просто неправильно. Flexbox - это буквально модуль макета.
 kamyl06 сент. 2017 г., 23:49
Нет. Flexbox является просто одномерным, а Css - двумерным. Макет двухмерный. ;]
 kamyl07 сент. 2017 г., 09:49
Хорошо, я отредактировал ответ. Тем не менее, решение остается тем же, поскольку этот вариант использования представляет собой 2-мерное расположение.
 TylerH06 сент. 2017 г., 23:50
Пожалуйста, смотритеназвание модуля: w3.org/TR/css-flexbox-1 "CSS Flexible Boxраскладка Модуль Уровень 1 "Акцент мой"
Решение Вопроса

что вам нужно поддерживать, может иметь смысл использовать CSS-макеты сетки (как указал TylerH, CSS-гриды не имеют универсальной поддержки браузера). Проверьте документацию для получения дополнительной информации:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

.flex-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
<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>

 TylerH06 сент. 2017 г., 23:49
@ kauffee000 Помните, что Microsoft Edge еще не полностью поддерживает макет сетки (хотя через месяц или два). Кроме того, IE не поддерживает эту реализацию компоновки сетки, но IE11 поддерживает более старую (другую) реализацию. Просто предупреждение для производственных сред.
 kauffee00007 сент. 2017 г., 13:49
Это на самом деле работает очень хорошо для меня, но я должен был добавить свои желоба. Я должен буду поработать над отзывчивостью, но это только начало. Спасибо!рабочая корзина
 Rob M.06 сент. 2017 г., 23:53
Спасибо за примечание @TylerH, обновил мой ответ, чтобы отразить неуниверсальную поддержку
 kauffee00006 сент. 2017 г., 23:46
Это интересно. Я посмотрю, увижу ли это то, что мне нужно. Я никогда не использовал это.

margin вместо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:center;
}

/* contains img block and title */
.thumb-grid {
  border: solid 1px rgba(0,0,0,.1);
  width: 150px;
  margin: 0 12px 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>

 TylerH06 сент. 2017 г., 23:46
ОП упоминает, что они хотят, чтобы незаполненные строки были выровнены по левому и правому краям, а не по центруThe reason I'm using space-between is that I want the images to align to the left of the parent container, and also to the right.

которое вы можете использовать с Flexbox, которое предоставит более широкое кросс-браузерное решение, чем CSS Grid (сегодня).

Основная хитрость заключается в том, чтобы иметьпризрак элементов, на 1 меньше, чем количество элементов в строке.

Они занимают то же горизонтальное пространство, что и обычный элемент, но не имеют высоты, и поэтому толкают любое число меньше 4 влево.

Поскольку мы можем использовать псевдоэлементы, в этом случае нам нужен только 1 дополнительный элемент, действующий какпризрак

Фрагмент стека

/* 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:empty,               /*  the ghost elements  */
.flex-container::before,
.flex-container::after {
  content: '';
  border: solid 1px rgba(0,0,0,0);
  width: 150px;
  margin-bottom: 36px;
  order: 1;
}

.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 class="thumb-grid"></div>

  </div>

Если в строке максимум 3 элемента, нам нужны только псевдоэлементы

/* outer container */
.flex-container {
  padding: 24px 0;
  background: white;
  border: solid 1px rgba(0,0,0,.1);
  max-width: 550px; /* 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;
}

.flex-container::before, .flex-container::after {
  content: '';
  border: solid 1px rgba(0,0,0,0);
  width: 150px;
  margin-bottom: 36px;
  order: 1;
}


.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>

Если это может быть динамическое количество элементов, например 3-5, до тех пор, пока мы не используем меньше, чем на 1 меньше, чем максимальное количество, это будет работать нормально.

/* outer container */
.flex-container {
  padding: 24px 0;
  background: white;
  border: solid 1px rgba(0,0,0,.1);
  max-width: 850px; /* 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:empty,               /*  the ghost elements  */
.flex-container::before,
.flex-container::after {
  content: '';
  border: solid 1px rgba(0,0,0,0);
  width: 150px;
  margin-bottom: 36px;
  order: 1;
}

.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 class="thumb-grid"></div>
   <div class="thumb-grid"></div>

  </div>

Ваш ответ на вопрос