От автора: занимаясь адаптивным дизайном, нам часто хочется изменить порядок расположения определенных элементов, перемещая то, что находится слева под основной текст, который нужно перенести наверх. Flexbox от CSS3 может сделать это для нас, но есть более скорый, хотя и более грязный способ, который можно сейчас применить.
Я говорю «сейчас», хотя, конечно, сейчас мы можем использовать и Flexbox, но выполнение разнится в зависимости от браузера, как и необходимый синтаксис. Крис Миллс (Chris Mills), работающий для Opera, написал две великолепные глубокие статьи (Основы Flexbox (Flexbox basics) и Продвинутый кроссбраузерный flexbox (Advanced cross-browser flexbox) о разных особенностях этого модуля.
Конечно, Flexbox предлагает больше, чем просто перемещение элементов, но если вам нужно только это, то далее свойства CSS display можно не смотреть.
(Между прочим, эта идея основана на том, о чем говорил нам Брюс Лоусон (Bruce Lawson) на beyondtellerand 2012)
Давайте возьмем четыре блока, чей простейший HTML размечен следующим образом:
|
1 2 3 4 5 6 |
<div class="boxes"> <div class="one box">Box One</div> <div class="two box">Box Two</div> <div class="three box">Box Three</div> <div class="four box">Box Four</div> </div> |
И чьи стили точно так же просты:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.boxes { width:50%; margin:0 auto; } .box { display:inline-block; width:24%; height:15em; text-align:center; line-height:15em; color:#fff; } .one { background:#333; } .two { background:#fff; color:#333; } .three { background:#aaa; } .four { background:#dc002e; } |
Изменить порядок этих блоков в медиазапросе можно легко, скажем, при 48em (768px), воспользовавшись преимуществом display:table. Для наглядности мы положим блок номер три наверх, за ним последуют блоки четыре, два и затем один.
Первым делом нужно установить содержащий элемент, .boxes, как display:table.
Затем устанавливаем элемент, который нужен нам вверху, блок номер три, как display:table-caption.
Чтобы сдвинуть элемент вниз, в данном случае блок номер один, устанавливаем display:table-footer-group.
И наконец, чтобы сдвинуть элемент кверху, но не на самый верх, устанавливаем блок номер четыре на display:table-header-group.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* 768px */ @media only screen and (max-width:48em) { .boxes { display:table; width:100%; } .box { display:block; width:100%; } .three { display:table-caption; } .four { display:table-header-group; } .one { display:table-footer-group; } } |
Если вы измените размер своего браузера, то сможете посмотреть этот простой демо-пример в действии.
Я знаю, что приверженцам чистого кода, возможно, это покажется отвратительным, но отмечу, что применял это в продуктивном коде просто оттого, что он работает, и создает гораздо меньше препятствий, чем многочисленные воплощения Flexbox. Этот метод кроссбраузерный – вплоть до Internet Explorer 8.
У такого решения, если можно его так назвать, также есть свои ограничения, так как у вас нет возможности точной настройки перемещения большого количества элементов, которую вам обеспечит Flexbox, но для нескольких элементов оно работает хорошо, что видно из демо-примера.
Автор: Ian Devlin
Источник: //www.iandevlin.com/
Редакция: Команда webformyself.
