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

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

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

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

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

<ul>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
 <li>Four</li>
 <li>Five</li>
 <li>Six</li>
 <li>Seven</li>
 <li>Eight</li>
 <li>Nine</li>
 <li>Ten</li>
</ul>

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

/* инверсия по горизонтали */
.row-reverse { display: flex; flex-direction: row-reverse; }

/* инверсия по вертикали */
.column-reverse { display: flex; flex-direction: column-reverse; }

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


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

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

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

Автор: David Walsh

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree