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

Пишите, отвечу на любые вопросы.
E-mail: dmitriyribka@gmail.com

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

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