Обратный порядок элементов с помощью CSS Flexbox

Обратный порядок элементов с помощью CSS Flexbox

От автора: CSS становится все более мощным инструментом. Мы почти дошли до той точки, когда порядок HTML элементов на странице не будет важен с точки зрения отображения. С помощью CSS сейчас можно создавать любые макеты, маленькие и большие. Забудем про семантику и доступность, на днях я думал, а можно ли инвертировать отображаемый порядок элементов только с помощью CSS. Раньше для этого нужно было менять DOM.

Смотреть демо

Например, у нас есть следующая разметка:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Хотите вы отображать элементы вертикально или горизонтально, для инверсии порядка элементов вам необходимо изменить значение flex-direction:

Значение row-reverse показывает элементы в обратном порядке по горизонтали, а column-reverse инвертирует элементы по вертикали.

Недавно я с помощью этой техники решил проблему с AngularJS, для этого мне пришлось пройтись в цикле по ключам объекта: из шаблона эти ключи пройти в цикле и инвертировать было невозможно, поэтому я изменил порядок элементов через CSS. Не идеал, но задача выполнена, да еще и в короткие сроки.

Я помню времена, когда люди думали, что Flexbox кардинально изменит CSS. Лично я не считаю, что Flexbox изменил интернет, но с ним можно делать потрясающие вещи. Я очень хочу расширить свои знания о Flexbox, а пока что буду делиться с вами вот такими кусочками кода!

Автор: David Walsh

Источник: https://davidwalsh.name/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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