Гибкая настройка расположения элементов с помощью Flex Order

Flex Order - это свойство CSS, которое определяет порядок следования элементов внутри контейнера с использованием Flexbox.

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

Ниже приведен пример кода, демонстрирующего использование свойства flex order:

HTML:

html

  
Item 1
  
Item 2
  
Item 3

CSS:

css
.container {
  display: flex;
}
.item {
  flex: 1;
  border: 1px solid;
  padding: 10px;
  margin: 5px;
}
.item:nth-child(1) {
  order: 3;
}
.item:nth-child(2) {
  order: 1;
}
.item:nth-child(3) {
  order: 2;
}

В данном примере мы создали контейнер с классом "container" и три элемента с классом "item". Элементы имеют одинаковую ширину, т.к. у них задано свойство flex: 1. Однако, с использованием свойства order, мы задаем порядок следования элементов. В данном случае, первый элемент будет отображаться последним, второй элемент - первым, а третий элемент - вторым.

Это всего лишь простой пример использования свойства flex order. В реальных проектах, его можно использовать для динамического изменения порядка элементов в зависимости от разных условий и разрешений экрана.