order

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

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"

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

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

.item {
  order: 3;
}

        
        
          
        
      

Как это понять

Секция статьи "Как это понять"

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

Как пишется

Секция статьи "Как пишется"

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

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

Подсказки

Секция статьи "Подсказки"

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