Создание адаптивной галереи изображений с помощью Flexbox
Поиск

Создание адаптивной галереи изображений с помощью Flexbox

Nikel, 30.04.2019

Создание HTML

Во-первых, давайте создадим HTML. Это будет простой div-контейнер, который включает в себя несколько тегов img. Изображения берутся рандомно с сайта loremflickr.com (на котором находятся случайные картинки  с сервиса Flickr), при этом можно задавать для них размер (обратите внимание на адрес картинок src, через косую черту задается их ширина и высота) . Обратите внимание, что, поскольку мы случайным образом генерируем изображения, они будут меняться при каждой перезагрузке браузера.

Класс .container нужен для контейнера flex, тогда как класс .item будет содержать элементы flex.

Вот как выглядит эта галерея, без использования CSS

Браузер расположил изображения рядом друг с другом, сохранив их оригинальный размер 320×240 пикселей. При уменьшении размеров окна браузера вы увидите, что изображения не уменьшаются, а переносятся ниже, они не являются адаптивными.

Добавим базовый сброс стилей

Чтобы удалить стили браузера по умолчанию, нужно применить сброс стилей. Он будет включать только те HTML-элементы, которые понадобятся для галереи (html, body, div, img).

Помимо этого добавим ко всем элементам свойство box-sizing: border-box , чтобы отступы и границы были включены в общую ширину и высоту элементов. Рекомендуют использовать это правило  для flexbox, так как в противном случае отступы и границы могут исчезнуть в конце строк.

Создание макета Flexbox

Создание макета flexbox довольно просто, достаточно добавить одну строку кода. Нам только нужно задать для  контейнера flex(в данном случае это div с классом .container) свойство display:flex.

Ниже можно увидеть, как теперь выглядит галерея изображений: все картинки укладываются в один ряд. Браузер адаптировал ширину и высоту изображений к размеру окна просмотра. Если изменить размер окна браузера, то видно, что теперь изображения становятся адаптивными. Они увеличиваются и сжимаются в соответствии с имеющимся пространством.

Обертка изображений в дополнительные элементы

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

Нужно будет использовать свойство flex-wrap, указывающее, расположены  элементы flex в одной или нескольких строках. Его значение по умолчанию-nowrap, это означает, что все элементы выстраиваются в одну строку. Однако, если мы зададим для него значение wrap, изображения будут располагаться в сетке. Нам нужно добавить правило flex-wrap в div.container:

После перезагрузки страницы видно, что изображения сохранили свои исходные размеры (320×240 пикселей) и расположены на нескольких строках.

На самом деле, этот макет очень похож на тот, с которого мы начали, перед добавлением CSS. Однако с flexbox изображения полностью адаптивные — вы можете проверить его, изменив размер окна браузера. Еще одно преимущество заключается в том, что теперь изображения (элементы класса item) можно легко расположить по-разному.

Добавление полей вокруг элементов flex.

Прежде чем обратить внимание на выравнивание, давайте добавим  поля вокруг изображений, а также добавим 5px отступы padding вокруг контейнера flex.

Выравнивание изображений

Режим верстки flexbox позволяет выровнять элементы flex несколькими различными способами, с помощью  свойства CSS justify-content. Его значением по умолчанию является flex-start, который распределяет элементы flex от начала до конца строки.

Однако, мы можем также распределить изображения  в противоположном направлении используя значение flex-end. Это может быть особенно полезно, если нужно поддерживать RTL (справа налево) языки:

В результате картинки будут расположены таким образом:

Свойство justify-content может принимать еще три, реже используемых на практике, значения. Если вы их используете, не забывайте выполнять проверку, изменяя размер окна браузера, чтобы знать как ваша галерея изображений ведет себя при разных размерах окна просмотра.

Значение space-between прикрепляет первый элемент к началу строки, а последний — к концу:

Когда задано значение space-around, изображения flex равномерно распределяются в ряду, а пространство перед первым элементом и после последнего элемента равно половине пространства между соседними изображениями:

Наконец, когда указано значение space-evenly, элементы распределяются так чтобы расстояние между двумя соседними изображениями и пространство перед первым и после последнего изображения были равны:

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

Flexbox делает создание адаптивных галерей изображений простым процессом.  CSS галереи — это всего лишь несколько строк кода. Однако обратите внимание, что подобная галерея изображений flexbox является хорошим выбором, только если все изображения имеют одинаковый размер. Важно помнить, что flexbox имеет проблемы с сохранением соотношения сторон, когда изображения имеют разную ширину и высоту.

Поддержка  flexbox браузерами в наши дни довольно хороша — он полностью работает со всеми современными браузерами, включая мобильные браузеры и частично с Internet Explorer 11.