Ґалерея за допомогою Flexbox: Посібник з створення адаптивного макету

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

Найважливіші відомості

• У цьому посібнику ви дізнаєтеся, як використовувати Flexbox для створення макету, заснованого на зображеннях, включаючи використання контейнерних елементів та застосування CSS-властивостей, таких як display: flex, position: absolute та justify-content: space-between.

Інструкція крок за кроком

Крок 1: Створення основної структури HTML-коду

Почніть з базової структури вашого HTML-документу. Створіть контейнерний елемент div з назвою main і додайте ще один div із класом images, який включає всі елементи тегів зображень (IMG). Ці зображення можна взяти з веб-сайту зі зображеннями громадського доступу. Зверніть увагу, що макет сконцентрований на трьох зображеннях, тож четверте не буде відображене.

Крок 2: Визначення CSS для головного контейнера

Для стилізації головного контейнера встановіть ширину на 100%, щоб він автоматично пристосовувався до ширини вікна. Встановіть висоту на 140 пікселів і переконайтеся, що позиціонування є відносним, щоб забезпечити правильну орієнтацію абсолютних позицій, які ми будемо використовувати для зображень та стрілок.

Крок 3: Стилізація контейнера для зображень

Встановіть контейнер зображень (.images) на position: absolute, щоб він летів над контейнером стрілок. Встановіть ширину і висоту на 100%, щоб він розташовувався повністю в головному контейнері. Також використовуйте властивості Flexbox.

Крок 4: Використання властивостей Flexbox для макету зображень

Для класу .images встановіть display: flex та вирівняйте контент в одному рядку за допомогою flex-direction: row. Додавання проміжку 4 пікселя між зображеннями забезпечить більше місця між ними, що полегшить макет.

Крок 5: Визначення стилів зображень

Зображення (img) в галереї слід встановити з властивістю Flexbox flex-basis на ширину 240 пікселів та висоту 140 пікселів. Крім того, ви можете встановити flex-grow та flex-shrink на 0, щоб зображення залишали свій розмір не змінювали й завжди мали вибрані виміри.

Крок 6: Створення контейнера для стрілок

Тепер перейдемо до контейнера для навігаційних стрілок. Цей контейнер також має бути встановлений на position: absolute та отримати висоту і ширину 100%, щоб завжди перебувати поверх зображень. Використовуйте display: flex, щоб розмістити стрілки горизонтально.

Крок 7: Стилізація стрілок

Встановіть властивість justify-content на space-between, щоб одна стрілка була ліворуч, а інша праворуч. Для стрілок можна використовувати символи Юнікоду для відображення стрілок. Встановіть кольор тексту на білий і переконайтеся, що задній план стрілок прозорий.

Крок 8: Додавання ефектів при наведенні

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

Крок 9: Перевірка та налаштування макету

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

Огляд

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