Створення галереї зображень на flexbox

Flexbox — це модуль CSS-макету, який робить можливим створення повністю гнучких інтерфейсів користувача і добре підходить для створення адаптивної галереї зображень, яка добре виглядає на будь-якому розмірі вікна перегляду.

1. Створення html-коду галереї

Спочатку створимо HTML. Це простий div , який містить пару тегів img. Зображення вставляються та генеруються випадковим чином з Unsplash Source API . Клас .container означає flex-контейнер, тоді як клас .item міститиме flex-елементи:

У браузері галерея виглядає так:

Браузер гарно розмістив зображення одне біля одного, зберігши їх початковий розмір 320×240 пікселів. Однак, якщо спробувати змінити розмір вікна браузера, то видно, що зображення не реагують, а це ще більша проблема, якщо використовувати зображення більшого розміру. Було б важко змінити їх положення та вирівнювання. Flexbox значно полегшує обробку зображень.

2. Додавання основних стилів скидання

Одна із властивостей веб-браузерів це надання стилю (за замовчуванням) елементам HTML. У кожного браузера є стандартна таблиця стилів агента користувача, яка за замовчуванням застосовується до кожної веб-сторінки в кожному браузері.

Навряд чи знайдуться два браузери, що надають однаковий дизайн за замовчуванням, тому єдиним способом переконатися в ефективності (одноманітності представлення свого сайту в різних браузерах) свого стилю є використання CSS Reset.

CSS Reset має на меті відновлення (або, швидше, встановлення) для всіх HTML елементів базові (передбачувані) стильові значення. Багато хто використовує модифіковану версію популярного скидання (v2.0 | 20110126) від Еріка Мейєра.

https://meyerweb.com/eric/tools/css/reset/ - посилання на сайт Еріка Мейера.

Один з піонерів методу скидання CSS, Ерік Меєр, створив таблицю стилів Reset, яка досі використовується на мільйонах веб-сайтів. Більшість людей використовують цей код в невідредагованому вигляді, незважаючи на рекомендацію Майєра проти цього:

Код скидання, який варто розмістити у окремому файлі reset.css і підключити перед власною таблицей стилів:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video

{ margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before,

blockquote:after,

q:before,

q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

Варто також додатио властивість box-sizing: border-box до всієї сторінки, щоб відступи та межі були включені в загальну ширину та висоту елементів.

Часто рекомендується використовувати це правило CSS для flexbox, оскільки в іншому випадку відступи та межі можуть зникнути в кінці рядків.

3. Створtння макету Flexbox

Налаштувати контейнер flex на відображення: flex. Наразі не потрібно додавати правила CSS до елементів flex.

.container { display: flex; }

Галерея зображень буде виглядати так:

Оскільки ми генеруємо зображення випадковим чином, вони змінюватимуться під час кожного перезавантаження браузера

Тепер усі зображення вписуються в один ряд. Браузер адаптував ширину та висоту зображень до розміру вікна перегляду. Якщо змінити розмір вікна браузера, то видно, що зображення стали гнучкими. Вони ростуть і зменшуються відповідно до наявного простору.

4. Обгортання зображення

Розміщення всіх зображень в одному рядку може бути хорошим рішенням для деяких макетів, наприклад, якщо у вас є лише кілька зображень (або піктограм). Однак сітки зображень використовуються частіше, особливо для галерей.

Тому щоб змусити зображення стати в акуратну сітку, потрібно використати властивість flex-wrap, яка вказує, чи будуть елементи flex розміщені в одному або кількох рядках.

Значення flex-wrap за замовчуванням — nowrap, що означає, що всі елементи розміщені в одному рядку. Однак, якщо ми налаштуємо його на обгортання, зображення будуть добре перетікати в сітку. Потрібно додати правило flex-wrap до контейнера flex:

container { display: flex;

flex-wrap: wrap; }

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

Цей макет дуже схожий на той, з якого починали, до додавання CSS. Однак у flexbox зображення повністю реагують — це можна перевірити, змінивши розмір вікна браузера. Ще одна перевага полягає в тому, що тепер зображення (flex-елементи) можна легко розташовувати різними способами

5. Додавання відступів

Щоб додати деякі відтсупи навколо зображень, можна використати традиційні методи і додати деякі поля навколо flex елементів. Оскільки поля між двома сусідніми зображеннями збільшаться (буде 10 пікселів замість 5 пікселів), також додамо відступ у 5 пікселів навколо контейнера flex.

   container {
       display: flex;
       flex-wrap: wrap;
       padding: 5px;
}
.item {

margin: 5px;
}

6. Вирівнювання зображень

Модуль макета flexbox дозволяє нам вирівнювати flex елементи кількома різними способами, використовуючи властивість justify-content CSS. Його значенням за замовчуванням є flex-start, який розкладає flex елементи від початку до кінця рядка. Це те, що ви могли побачити у наведеному вище прикладі.

Однак ми також можемо розмістити зображення в протилежному напрямку, використовуючи значення flex-end.

Але найкраще значення рівномірного простору додає рівні пробіли навколо кожного flex елемента значення space-evenly:

.container {

display: flex;

flex-wrap: wrap;

padding: 5px;

justify-content: space-evenly;

}

item {

margin: 5px;

}