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