order
CSS свойство order указывает в каком порядке будут выводится flex-элементы внутри flex-контейнера. По умолчанию все flex-элементы выводятся в том порядке, в котором они определены в исходном коде.
При использовании свойства order flex-элементы будут располагаться в порядке возрастания присвоенных им индексов. flex-элементы с одинаковыми индексами будут располагаться в том порядке, в котором они определены в коде.
Примечание: если элемент не является flex-элементом , свойство order будет проигнорировано.
CSS order property
The order property is used to specify the order of a flexible item inside the flex or grid container.
The order property is a part of the Flexible Box Layout module.
The order property is one of the CSS3 properties.
Accessibility Concerns
The order property creates a disconnection between the content’s visual display and DOM order. This can affect the users with low vision experience who use assistive technology (e.g., screen reader). If the visual order is essential, the correct reading order will not be available to the screen reader users.
| Initial Value | 0 |
| Applies to | Flex items and absolutely-positioned flex container children. |
| Inherited | No. |
| Animatable | Yes. Order of the elements are animatable. |
| Version | CSS3 |
| DOM Syntax | Object.style.order = «4»; |
Syntax
Example of the order property:
Result
Example of the order property applied to the container class:
In the above-mentioned examples, the order property defines the order for flexible items. According to the user requirement, each item is given a number.
Свойство order
Свойство order задает порядок следования отдельно взятого flex -блока внутри flex -контейнера. Применяется к конкретному flex блоку.
Своим значением свойство принимает положительное или отрицательное целое число. Чем меньше число — тем раньше будет стоять элемент, независимо от расположения в HTML коде относительно других элементов.
Синтаксис
Пример
В данном примере всем блокам задан порядок расположения с помощью order. Самым первым будет блок с отрицательным order -1 , потом с order 1 и так далее по возрастанию:
CSS order Property
The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container.
Note: If the element is not a flexible item, the order property has no effect.
| Default value: | 0 |
|---|---|
| Inherited: | no |
| Animatable: | yes, see individual properties. Read about animatable Try it |
| Version: | CSS3 |
| JavaScript syntax: | object.style.order="2" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.