Зворотний порядок елементів з допомогою CSS Flexbox

3

Від автора: CSS стає все більш потужним інструментом. Ми майже дійшли до тієї точки, коли порядок HTML-елементів на сторінці не буде важливий з точки зору відображення. З допомогою CSS зараз можна створювати будь-які макети, маленькі і великі. Забудемо про семантику і доступність, днями я думав, а чи можна інвертувати відображається порядок елементів тільки за допомогою CSS. Раніше для цього потрібно було міняти DOM.

Дивитися демо

Наприклад, у нас є наступна розмітка:

  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
  • Nine
  • Ten

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

/* інверсія по горизонталі */
.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, а поки що буду ділитися з вами ось такими шматочками коду!