CSS — Вертикальный порядок блоков или реверс flexbox

Если необходимо изменить вертикальный порядок блоков на обратный, есть быстрый способ. Как это можно сделать?

flex-direction: column-reverse

Тем временем, flexbox продолжает захватывать мир 🙂 . Привет bootstrap 4 и его гениальная сетка.

А в нашей задаче все начинается с простого. Пишем для нашего блока CSS:

.left_block {
	display: flex;
}

display flex «активирует» целый набор различных свойств. При этом, наш HTML выглядит так:

<div class="left_block">
  <div class="block_top">top</div>
  <div class="block_bottom">bottom</div>
</div>

Теперь что происходит — структуру мы не меняем, добавляем свойство реверса:

.left_block {
	display: flex;
	flex-direction: column-reverse;
}

flex-direction: column-reverse, как вы уже догадались, изменит порядок этих блоков в браузере . Конечно если у вас будет 3 колонки или больше:

<div class="left_block">
  <div class="block_top">1</div>
  <div class="block_middle">2</div>
  <div class="block_bottom">3</div>
</div>

то с этим свойством вы увидите их в обратной последовательности:

3
2
1

Приведу пример, почему это может быть удобно (сайт на 1С-Битрикс):
в тех редких случаях, когда информация в левом сайдбаре сначала собралась из шаблона (левое меню каталога), а после дополнилась фильтром из каталога все в том же сайдбаре, то у нас есть 2 пути:
— написать 2 строчки CSS и если блоков больше не будет, это вполне себе хорошее решение, ведь их последовательность не нарушится
— переписать вывод так, чтобы меню при определенных условиях формировалось после фильтра в самом каталоге

Согласитесь, вариант с display:flex выглядит куда проще и практичнее. Плюс ко всему, flex-direction: column-reverse даже если и не поддерживается на каком-либо браузере или устройстве, то ничего не случится, и пользователь просто увидит эти блоки в своем обычном порядке.

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

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

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