Могу ли я изменить значение "justify-content" в зависимости от количества элементов в контейнере flex?

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

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

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

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

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

Ответы

Ответ 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>

Ответ 2

Как использовать 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>

Ответ 3

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

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

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

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

Ответ 4

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

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

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

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

Фрагмент стопки

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