Flex-таблицы
09.06.2016

При разработке сайта ПеревеземПросто ставилась задача реализовать интерфейс, который одинаково хорошо будет смотреться как десктопах, так и на мобильных устройствах с небольшим экраном. В дизане был предусмотрен блок "Цены", который визуально выглядит как таблица.

Дизайн таблицы

При классической верстке можно было бы реализовать это с помощью классической таблицы <table>. К слову сказать в первой версии сайта так и было сделано в угоду быстрому выпуску сайта в эксплуатацию, и лишь чуть позже верстка была изменена под требования адаптивности.

Но таблицы хорошо смотрятся лишь на широких экранах. Стоит открыть такую таблицу на экране мобильного телефона, как вся красота уезжает куда то за пределы экрана. А в случае с этим сайтом, так и вовсе большая часть таблицы была не видна, т.к. у блока было выставлено свойство "owerflow: hidden", т.е. горизонтальная прокрутка не появлялась.

Для решения это проблемы было принято решение табличную верстку заменить на блочную с применением свойcтва "display: flex;" у родительского контейнера. Таблица была разбита на 18 блоков:

18 блоков

Таблица имеет три колонки. Блокам расположенным в каждой из колонок был присвоен соответствующий класс "column1", "column2" и "column3". Это класс нужен только для изменения порядка блоков (см. свойство "order"). Также всем 18 блокам установлен второй класс "container", в нем сосредоточены основные свойства блоков (отступы, ширина и т.п.). Что бы при расширении экрана блоки не выстроились в большее число колонок классу "container" было установлено свойство "width: 33.3333%". Изначально классам "column1", "column2" и "column3" присвоено свойство "order:1", блоки располагаются в том порядке в котором они следуют в html.

Магия начинается когда при сжатии страницы до "критического" размера (в моем случае это 670px) таблица перестает вмещаться в контейнер и часть ее начинает пропадать под правым краем контейнера.

С помощью медиа-запроса:

@media screen and (max-width: 670px) {
  .container {width: 100%;}
  .column1 {order: 1;}
  .column2 {order: 2;}
  .column3 {order: 3;}
}

все блоки растягиваются до ширины контейнера ".container {width: 100%;}" и с помощью свойства "order" меняется порядок блоков расположенных в колонках. За счет того, что блокам с классом "column1" присвоен "order:1", они идут первыми по вертикали сверху вниз, затем идут блоки с классом "column2", т.к. им медиа-запросом присвоен порядок "order:2", и последними идут блоки класса "column3" с "order:3". 

Таким образом таблица выстраивается в одну колонку, сохраняя последовательность информации без изменения самого html. Получаем адаптивную таблицу без javascript, которая одинаково хорошо смотрится, и на широком экране, и на маленьком телефоне.

Болле подробно изучать классы и разметку, а также посмотреть как это работает в действии, вы можете на сайте http://perevezemprosto.ru

release 1.0