order

Меняем визуальный порядок флекс-элементов, не меняя HTML.

Время чтения: меньше 5 мин

Кратко

Скопировано

При помощи свойства order можно менять порядок отображения флекс-элементов внутри флекс-контейнера.

Пример

Скопировано

В этом примере элемент с классом .item встанет последним, даже если в разметке будет первым.

        
          
          .container {  display: flex;}.item {  order: 3;}
          .container {
  display: flex;
}

.item {
  order: 3;
}

        
        
          
        
      

Как понять

Скопировано

По умолчанию элементы отображаются в том порядке, в котором они расположены в разметке, а значение свойства order равно 0. Но это свойство позволяет переставлять их местами.

Как пишется

Скопировано

Значение задаётся в виде целого отрицательного или положительного числа. Элементы встают по возрастающей.

Пример свойства флекс-элементов order

Подсказки

Скопировано

💡 Свойство меняет только визуальный порядок. Стоит помнить об этом. Скринридеры по-прежнему будут читать элементы по порядку расположения в разметке.

Поддержка в браузерах:
  • Chrome 57, поддерживается
  • Edge 79, поддерживается
  • Firefox 81, поддерживается
  • Safari 9, поддерживается
О Baseline