Продолжаю серию авторских заметок по фронтенду. Сегодня я покажу на реальном примере как просто и эффективно менять последовательность div блоков на сайте. И все благодаря Flex. Что это такое и “с чем его едят” – читайте в моей небольшой заметке.
Что такое Flex?
Flex – универсальное свойство в CSS (Cascade Style Sheet – каскадные таблицы стилей), которое добавляет блоку или элементу способность гибкого позиционирования – растягивания, сжимания, заполнения пространства, в том числе позволяет компактно изменять последовательность вывода элементов. Современные фронтенд-разработчики и веб-дизайнеры успешно применяют технологию flexbox в создании адаптивных и компактных темплейтов (шаблонов) сайтов.
Как работает свойство Flex?
Много рассказывать не буду. Рассмотрим на реальном примере.
Описание задачи: на сайте расположены 4 блока (div контейнера) с определенным контентом. Они выводятся в стандартном порядке: 1, 2, 3, 4.
Цель: нужно изменить последовательность блоков на мобильных устройствах в новом порядке: 1, 4, 2, 3.
Выполнение задачи:
Первое, что нужно сделать – это разобрать иерархию, структуру блоков, чтобы понять, где тут родительский, а где дочерние блоки.
Вот так она выглядит в моем примере:
<div class="content"> <div id="one" class="block1">1</div> <div id="two" class="block2">2</div> <div id="three" class="block3">3</div> <div id="four" class="block4">4</div> </div>
Родительским классом является .content. Значит ему и нужно добавить свойство flex:
.content {
display: flex;
flex-wrap: wrap;
}
Готово. Теперь можно приступать к изменению последовательности его дочерних блоков. Все что нужно сделать, это каждому классу дочернего элемента прописать свойство order с указанным номером вывода (нумерация начинается от 0).
Вот так:
.block1 {order:0;}
.block4 {order:1;}
.block2 {order:2;}
.block3 {order:3;}
Вот и все) Проще пареной репы!
Но! У нас была другая цель – использовать эту последовательность только на мобильных устройствах (а на desktop’ах выводить стандартно). Для этого нужно к стилям просто добавить CSS-правило (или условие) @media (задаете ширину, на которой стили должны сработать):
@media (max-width: 899px){
.block1 {order:0;}
.block4 {order:1;}
.block2 {order:2;}
.block3 {order:3;}
}
