От автора: CSS становится все более мощным инструментом. Мы почти дошли до той точки, когда порядок HTML элементов на странице не будет важен с точки зрения отображения. С помощью CSS сейчас можно создавать любые макеты, маленькие и большие. Забудем про семантику и доступность, на днях я думал, а можно ли инвертировать отображаемый порядок элементов только с помощью CSS. Раньше для этого нужно было менять DOM.
Смотреть демо
Например, у нас есть следующая разметка:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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:
|
1 2 3 4 5 |
/* инверсия по горизонтали */ .row-reverse { display: flex; flex-direction: row-reverse; } /* инверсия по вертикали */ .column-reverse { display: flex; flex-direction: column-reverse; } |
Значение row-reverse показывает элементы в обратном порядке по горизонтали, а column-reverse инвертирует элементы по вертикали.
Недавно я с помощью этой техники решил проблему с AngularJS, для этого мне пришлось пройтись в цикле по ключам объекта: из шаблона эти ключи пройти в цикле и инвертировать было невозможно, поэтому я изменил порядок элементов через CSS. Не идеал, но задача выполнена, да еще и в короткие сроки.
Я помню времена, когда люди думали, что Flexbox кардинально изменит CSS. Лично я не считаю, что Flexbox изменил интернет, но с ним можно делать потрясающие вещи. Я очень хочу расширить свои знания о Flexbox, а пока что буду делиться с вами вот такими кусочками кода!
Автор: David Walsh
Источник: //davidwalsh.name/
Редакция: Команда webformyself.
