CSS-свойство order указывает порядок, в котором flex-элементы отображаются и располагаются внутри flex-контейнера. Элементы располагаются в порядке возрастания номера order. Элементы с одинаковым номером располагаются в том порядке, в котором они указаны в исходном коде.

Значение по умолчанию: 0
Применяется к: Flex-элементы и абсолютно-позиционированные потомки flex-контейнеров
Наследование: Нет
Анимирование: Да. Анимируемые свойства
Версия: Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

order: integer | initial | inherit

Примеры написания кода свойства order:

.flex-container {
    border: 2px solid #000;
    display: -webkit-flex; /* Safari 6.1+ */
    display: flex;
} 
.item1 {
    width: 100px;
    background: #ff80c0;
    -webkit-order: 2; /* Safari 6.1+ */
    order: 2;
}
.item2 {
    width: 100px;
    background: #8080ff;
    -webkit-order: 1; /* Safari 6.1+ */
    order: 1;
}
.item3 {
    width: 100px;
    background:#0080ff;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
integer Определяет порядковый номер flex-элемента. Значением по умолчанию является 0.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента order.

Поддержка браузеров

Свойство order поддерживается во всех основных браузерах.

Читайте также

Похожие посты

CSS-свойство clip

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

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.