order
Поддержка браузерами
11.0+ | 28.0+ | 29.0+ | 17.0+ | 9.0+ |
Описание
CSS свойство order
указывает в каком порядке будут выводится flex-элементы внутри flex-контейнера. По умолчанию все flex-элементы выводятся в том порядке, в котором они определены в исходном коде.
При использовании свойства order
flex-элементы будут располагаться в порядке возрастания присвоенных им индексов. flex-элементы с одинаковыми индексами будут располагаться в том порядке, в котором они определены в коде.
Примечание: если элемент не является flex-элементом , свойство order
будет проигнорировано.
Значение по умолчанию: | 0 |
---|---|
Применяется: | к flex-элементам |
Анимируется: | да |
Наследуется: | нет |
Версия: | CSS3 |
Синтаксис JavaScript: | object.style.order="2"; |
Синтаксис
order: число;
Значения свойства
Значение | Описание |
---|---|
число | Числовой индекс, присваиваемый flex-элементу. Значение по умолчанию 0.
Примечание: допускается использование отрицательных значений. |
Пример
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> #main { width: 300px; height: 200px; border: 1px solid black; display: flex; } #main div { height: 32px; width: 32px; color: #fff; padding: 10px; font-size: 25px; } .d3 {order: 1;} .d5 {order: -1;} </style> </head> <body> <div id="main"> <div style="background: #ff5c33;">1</div> <div style="background: #ffad33;">2</div> <div style="background: #00cc00;" class="d3">3</div> <div style="background: #3385ff;">4</div> <div style="background: #d966ff;" class="d5">5</div> </div> </body> </html>Попробовать »