Обратный порядок элементов с помощью 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

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

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

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

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

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree