Отзывчивые блоки одинаковой высоты на основе Flexbox

Отзывчивые блоки одинаковой высоты на основе Flexbox

От автора: После публикации поста о том, как я создал отзывчивые блоки одинаковой высоты на сайте Readerrr, я получил несколько полезных отзывов от сообщества веб-разработчиков. Дэниел Стёрм (Daniel Sturm) предложил мне использовать модуль Flexbox из CSS3 вместо JavaScript, а Вирли Питерс (Veerle Pieters) оставил твит «… вы можете сделать это с помощью Flexbox, а JavaScript использовать для подстраховки». Точно! И почему я сам об этом не додумался?! Я читал до этого несколько статей про Flexbox, но сам никогда его не применял, поэтому он совершенно вылетел у меня из головы.

Почему Flexbox? Если вкратце, то модуль Flexbox Layout был создан для решения именно таких задач. Он является эффективным и гибким инструментом для управления, возможно, всеми разновидностями макетов. Благодаря ему практически не возникает задержки по времени между неправильной и правильной отрисовкой внешнего вида макета. При использовании решения на JavaScript тратится время на загрузку документа, затем на загрузку соответствующего JS-файла и, если таковые имеются, на загрузку изображений в блоках. Решение с Flexbox срабатывает мгновенно, а решению на JavaScript потребуются секунды. Но даже в этом случае, решение на JavaScript прекрасно подойдет для людей, использующих старые версии браузеров, которые не поддерживают Flexbox.

Проблема

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Решение

Если вы никогда раньше не сталкивались с Flexbox, то вы будете удивлены, насколько он потрясающий. Свойство display: flex активирует сам Flexbox для контейнера и свойство flex-wrap: wrap говорит о том, что нужно обернуть дочерние элементы, а нет уместить их на одной строке. Повторное написание свойства display: flex для дочерних элементов гарантирует одинаковую высоту элементов в строках.

Это решение отлично работает в последних версиях браузеров Chrome, Android, Safari, Opera, Firefox и Internet Explorer 10+. Для всех остальных браузеров у меня есть «лекарство» на JavaScript.

Я не включил это в предыдущий CSS-код, но некоторые старые версии браузеров на движке WebKit поддерживают устаревший синтаксис для Flexbox (display: -webkit-box). Однако, свойство -webkit-box-lines: multiple просто не работает ни в браузере iOS Safari 6.1-, ни в Android 4.3-.

Запасной вариант на JavaScript

Здесь я рассматриваю альтернативное решение для таких браузеров, как Internet Explorer 9-, Android 4.3-, iOS Safari 6.1-, and Opera Mini. Я написал крошечный кусочек кода на jQuery, который:

Определяет браузер, не поддерживающий Flexbox;

Вычисляет число элементов на одной строке, разделив для этого значения ширины у элементов .list и .list__item;

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Фактически делит список на строки в соответствии с этим числом;

Находит элемент с наибольшим значением высоты в каждой строке;

Устанавливает соответственно такое же значение высоты для всех остальных элементов в каждой строке.

А что если в браузере отключен JavaScript? Проблема заключается в том, что встроенный механизм CSS для распознавания возможностей имеет более слабую поддержку, чем сам модуль Flexbox. Таким образом, использование CSS-правила @support не подойдет для определения всех браузеров, поддерживающих Flexbox. Но это лучше, чем ничего.

Я предлагаю рассуждать следующим образом: отключен JavaScript = нет поддержки Flexbox (я считаю, что данное равенство является практически верным), а для исключений будем использовать @support. На деле вам нужно добавить класс .no-js для тега html и удалить его с помощью JavaScript. Именно так мы узнаем, отключен JavaScript или нет. Затем добавьте соответствующие стили для элементов списка и, наконец, «компенсируйте» данное оформление с помощью правила @supports.

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

Демо-пример

Автор: Osvaldas Valutis

Источник: http://osvaldas.info/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Цифровой

    Че-то у меня не выравнивает по высоте блоки. Наверное чего-то не хватает

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree