Создание простой «мощеной» верстки с использованием 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

Перевод — Дежурка

Смотрите также: