Сегодня я покажу на реальном примере как просто и эффективно изменить чередование div блоков на сайте с помощью Flex СSS. Что это такое и «с чем его едят» — читайте в этой небольшой заметке.
Что такое 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;}
}