мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Свойство order

Свойство order задает порядок следования отдельно взятого flex-блока внутри flex-контейнера. Применяется к конкретному flex блоку.

Своим значением свойство принимает положительное или отрицательное целое число. Чем меньше число - тем раньше будет стоять элемент, независимо от расположения в HTML коде относительно других элементов.

Синтаксис

селектор { order: положительное или отрицательное число; }

Пример

В данном примере всем блокам задан порядок расположения с помощью order. Самым первым будет блок с отрицательным order -1, потом с order 1 и так далее по возрастанию:

<div id="parent"> <div id="elem1">1</div> <div id="elem2">2</div> <div id="elem3">3</div> <div id="elem4">4</div> <div id="elem5">5</div> <div id="elem5">6</div> </div> #parent { display: flex; align-items: flex-start; flex-direction: row; } #parent > div { border: 1px solid #696989; min-width: 100px; } #elem1 { order: 4; } #elem2 { order: 5; } #elem3 { order: 3; } #div4 { order: 2; } #elem5 { order: 1; } #elem6 { order: -1; }

:

Смотрите также

  • свойство flex-direction,
    которое задает направление осей flex блоков
  • свойство justify-content,
    которое задает выравнивание по главной оси
  • свойство align-items,
    которое задает выравнивание по поперечной оси
  • свойство flex-wrap,
    которое многострочность flex блоков
  • свойство flex-flow,
    сокращение для flex-direction и flex-wrap
  • свойство order,
    которое задает порядок flex блоков
  • свойство align-self,
    которое задает выравнивание одного блока
  • свойство flex-basis,
    которое задает размер конкретного flex блока
  • свойство flex-grow,
    которое задает жадность flex блоков
  • свойство flex-shrink,
    которое задает сжимаемость flex блоков
  • свойство flex,
    сокращение для flex-grow, flex-shrink и flex-basis