Создание простой «мощеной» верстки с использованием Flexbox
24 января 2017 | Опубликовано в css | 1 Комментарий »
В этом уроке мы покажем, как создать эффект «мощения» изображениями с помощью Flexbox. Этот тип размещения контента очень популярен. Сегодня это настоящий тренд, и очень полезно уметь верстать таким образом. Сегодняшний урок поможет вам в этом. Разметка весьма очевидна:
<div id="masonry"> <img src="irina.jpg" alt> <img src="daniella.jpg" alt> <img src="karina.jpg" alt> … </div>
Код CSS тоже очень простой. В отрывке кода ниже не используются приставки производителей для браузеров Firefox и Chrome, так как они не нужны для Flexbox в современных версиях этих браузеров:
div#masonry { display: -ms-flexbox; -ms-flex-direction: column; -ms-flex-wrap: wrap; display: flex; flex-direction: column; flex-wrap: wrap; height: 100vw; font-size: 0; } div#masonry img { width: 33.3%; transition: .8s opacity; } div#masonry:hover img { opacity: 0.3; } div#masonry:hover img:hover { opacity: 1; }
Здесь важно обратить внимание на задание высоты родительскому блоку: без этого ограничения изображения разместятся в одном непрерывном вертикальном столбце, не обращая внимания на свойство flex-wrap.
Запасные варианты
Для старых версий браузеров добавлено еще одно правило в самом конце файла стилей:
@supports not (flex-wrap: wrap) { div#masonry { display: block; } div#masonry img { display: inline-block; vertical-align: top; } }
Являясь частью модуля запросов свойств, правило @supports позволяет сайту спросить у браузера, какие свойства тот поддерживает, так же, как @media queries позволяет нам узнать размер, высоту и разрешение устройства отображения. Со временем правило запроса поддержки позволит нам создавать запасные варианты для браузеров на чистом CSS, заменяя многие скрипты и библиотеки JavaScript для определения и добавления поддержки свойств.
Сейчас это правило поддерживается всеми современными версиями браузеров, кроме браузеров Internet Explorer, Blackberry Browser и UC Browser for Android. Проблема с браузером Internet Explorer от версии 10 решается с помощью кода CSS выше, а с браузерами Internet Explorer до версии 9 — с помощью условных комментариев. Но могут быть проблемы с ранними версиями браузера Firefox: в нем поддерживается свойство display: flex, но не flex-wrap, что приводит к появлению эффекта «Франкенштейна» вместо эффекта «мощения». Поэтому если Вам необходима поддержка старых версий браузеров, может понадобиться добавить и старый синтаксис Flexbox.
Свойство отображения в одну строку, заданное изображениям, работает не совсем так, как Flexbox: иногда могут появляться вертикальные промежутки между изображениями в столбцах, но это подходящий запасной вариант.
Доступность на мобильных устройствах
Переход к двухстолбцовой верстке на мобильных устройствах для сохранения качества изображений очень прост:
@media screen and (max-width: 500px) { div#masonry { height: 200vw; } div#masonry img { width: 50%; } }
Заключение
Как Вы видите, Flexbox сейчас позволяет легко создавать верстки интересной конфигурации, такие как эффект «мощения» и верстка в стиле социального интернет-сервиса Pinterest. Гораздо большего можно добиться, используя Flexbox для задания свойств отдельным дочерним элементам.
Использованы фотографии Sean Archer, лицензированные по лицензии Creative Commons.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191