Отзывчивая галерея изображений с помощью CSS flexbox или grid-layout

Question

Я работаю над Image-Gallery-Widget, где пользователь может установить ширину миниатюр, высоту эскизов и маркер (между эскизами), а виджет будет представлять все изображения хорошая сетка, где каждое изображение имеет одинаковую ширину и высоту.

Мне интересно, возможно ли css-flexbox или css-grid без необходимости определять строки и столбцы в коде и без необходимости наличия точек останова/медиа-запросов.

Уменьшенные изображения завернуты в якорь, поэтому галерея товар (или сетка-элемент) будет выглядеть примерно так:

<a href="#" class="gallery-item"> 
    <img src="myimage" width="300" height="200" /> 
</a> 

галерея элементы должны полностью заполнить контейнер DIV, что означает, не должно быть разрыва между последним эскизом в строке и правым краем контейнера div (кроме случаев, когда у нас недостаточно элементов для заполнения строки, т. е. когда 3 элемента ft в строке, но у нас есть только 8 элементов, тогда 3-я строка будет иметь только 2 элемента и пробел справа, который будет шириной, чем один элемент).

Элементы галереи никогда не могут быть шире, чем ширина пользовательского набора, поскольку мы не хотим ухудшать качество эскизов. Предположим, что для этого примера допустим ширину 300 пикселей. Поля между элементами галереи фиксированы и заданы пользователем. Если нет достаточного количества пунктов остались заполнить строку, просто оставил выровнять т.е. примерно так:

Я не хочу, чтобы определить, какие контрольные точки в CSS, ни добавить любой HTML для конструкций строк/столбцов. Я хочу, чтобы браузер просто размещал столько элементов галереи рядом друг с другом, как вставляется в контейнер. Если справа есть пробел (т. Е. 3 эскиза * 300px width = 900px, но контейнер шириной 1000px), браузер должен масштабировать элементы сетки, чтобы вставить еще один элемент галереи и, таким образом, устранить пробел. Мне нужно определить маржу вокруг каждого элемента галереи.

Вы можете увидеть желаемое отзывчивое поведение (при изменении ширины окна браузера) в этом формате GIF:

То, что вы видите в GIF сделан без Flexbox, но нуждается в тонне CSS, который я был надеясь избежать использования flexbox. Я несколько раз исследовал flexbox, но пока не смог полностью обдумать его.

Спасибо за любые советы!

Answer 1

Использование функции flex должно быть достаточным для выполнения вашей задачи. Помните о частичной поддержке в IE11: http://caniuse.com/#feat=flexbox.

Поместите эти стили на контейнере:

.gallery { 
    display: flex; 
    flex-wrap: wrap; 
    align-content: flex-start; 
    justify-content: space-between; 
} 

Стили для оберток:

.gallery a { 
    flex-grow: 1; 
    flex-basis: 125px; 
    max-width: 300px; 
    margin: 5px; 
} 

стилей для изображений:

.gallery img { 
    height: 100%; 
    width: 100%; 
} 

Пространство между изображениями может быть просто определена с помощью margin. Чтобы сохранить коэффициент изображения, вы можете использовать ссылки (<a>) в качестве оберток для изображений (<img>).

Кроме того, чтобы предотвратить увеличение изображений, вы можете применить атрибуты на якорях flex-grow, flex-basis и max-width. Была также проблема с растягиванием изображений в последней строке - взломать для этого нужно положить n - 1 (где n - количество изображений) пустые предметы внутри контейнера.

Установка width и height к 100% на изображение, приводит их в исполнение, чтобы автоматически вырасти до ширины, определяемой max-width атрибутом, сохраняя при этом соотношение сторон.

Пожалуйста, проверьте рабочий пример: FIDDLE

Answer 2

Если вы не возражаете против использования средств массовой информации точки останова, используйте новый CSS Grid Layout. Не забудьте указать его для поддержки IE10 +.

Сетка:

.gallery { 
    display: grid; 
    grid-gap: 5px; 
} 

Адаптивные изображения:

.gallery img { 
    width: 100%; 
} 

СМИ точки останова (значения взяты из Bootstrap 4)

@media (max-width: 575.98px) { 
    .gallery { 
     grid-template-columns: repeat(1, 1fr); 
    } 
} 
@media (max-width: 768.98px) and (min-width: 576px) { 
    .gallery { 
     grid-template-columns: repeat(2, 1fr); 
    } 
} 
@media (max-width: 991.98px) and (min-width: 768px) { 
    .gallery { 
     grid-template-columns: repeat(3, 1fr); 
    } 
} 
@media (max-width: 1199.98px) and (min-width: 992px) { 
    .gallery { 
     grid-template-columns: repeat(4, 1fr); 
    } 
} 
@media (min-width: 1200px) { 
    .gallery { 
     grid-template-columns: repeat(5, 1fr); 
    } 
} 

jsFiddle