Order css как работает

order¶

Свойство order определяет порядок вывода флексов внутри флекс-контейнера.

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

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

Демо¶

Flexbox и выравнивание

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10

/* values */ order: 5; order: -5; /* Global values */ order: inherit; order: initial; order: revert; order: revert-layer; order: unset; 

Значения¶

Значение по-умолчанию	0
Наследуется	нет
Применяется	Элементы flex, элементы grid и абсолютно позиционированные дочерние элементы контейнеров flex и grid
Анимируется	да

В качестве значения принимается любое целое число, включая отрицательные числа и ноль.

Проблемы доступности¶

Использование свойства order создаст несоответствие между визуальным представлением содержимого и порядком DOM. Это негативно скажется на пользователях со слабым зрением, осуществляющих навигацию с помощью вспомогательных технологий, таких как устройство чтения с экрана. Если визуальный (css) порядок важен, то пользователи скринридеров не будут иметь доступа к правильному порядку чтения.

Спецификации¶

• CSS Display Module Level 3
• CSS Flexible Box Layout Module

Поддержка браузерами¶

Примеры¶

Примеры использования CSS свойства order :

Пример 1¶

HTML CSS Результат

1 2 3 4 5 6 7

header>…header> main> article>Articlearticle> nav>Navnav> aside>Asideaside> main> footer>…footer> 

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

main  display: flex; text-align: center; > main > article  flex: 1; order: 2; > main > nav  width: 200px; order: 1; > main > aside  width: 200px; order: 3; > 

Пример 2¶

HTML Результат

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

 html> head> meta charset="utf-8" /> title>ordertitle> style> .flex-container  padding: 0; margin: 0; list-style: none; display: flex; flex-flow: row wrap; > .flex-item  background: #69489d; color: white; padding: 20px 30px; margin: 5px; font-size: 2em; > .flex-item:nth-of-type(1)  order: 5; > .flex-item:nth-of-type(2)  order: 4; > .flex-item:nth-of-type(3)  order: 3; > .flex-item:nth-of-type(4)  order: 2; > .flex-item:nth-of-type(5)  order: 1; > style> head> body> ul class="flex-container"> li class="flex-item">1li> li class="flex-item">2li> li class="flex-item">3li> li class="flex-item">4li> li class="flex-item">5li> ul> body> html> 

См. также¶

• Руководство по Flexbox
• Руководство по Grid Layout
• https://developer.mozilla.org/docs/Web/CSS/order

order

Меняем визуальный порядок флекс-элементов, не меняя HTML.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 11 мая 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

При помощи свойства order можно менять порядок отображения флекс-элементов внутри флекс-контейнера.

Пример

Скопировать ссылку «Пример» Скопировано

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

 .container  display: flex;> .item  order: 3;> .container  display: flex; > .item  order: 3; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Значение задаётся в виде целого отрицательного или положительного числа. Элементы встают по возрастающей.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Свойство меняет только визуальный порядок. Стоит помнить об этом. Скринридеры по-прежнему будут читать элементы по порядку расположения в разметке.

Полный список свойств флексбоксов можно посмотреть в гайде по flexbox.

• Chrome 59, поддерживается 59
• Edge 79, поддерживается 79
• Firefox 81, поддерживается 81
• Safari 11, поддерживается 11

Порядок следования flex-элемента (свойство order) | Flexbox | CSS

Flexbox (флексбокс) предназначен для вёрстки гибких макетов. Ежели свойство display контейнера принимает значение flex , его прямые потомки становятся flex-элементами, порядком следования которых можно управлять с помощью свойств flex-flow и order .

order

 .raz < display: flex; flex-flow: wrap; background: green; >.raz div < margin: .5em; padding: 1em; background: rgb(255, 255, 0); >.raz div:nth-child(2) < order: 0; background: red; > .raz div:nth-child(3) < order: 1; >.raz div:nth-child(4) 
1
 
2
 
3
 
4
 

Если у flex-элементов одинаковое значение order , то нижние в коде теги показаны после верхних (поведение по умолчанию)

  
1
 
2
 
3
 
4
 
5
 
6
 

Чем меньше значение order , тем раньше показан flex-элемент

Переместить 3-ий flex-элемент первым

  
1
 
2
 
3
 
4
 
5
 
6
 

Поместить 3-ий flex-элемент последним

  
1
 
2
 
3
 
4
 
5
 
6
 

Поставить flex-элемент с классом .ad третьим

  
1
 
2
 
3
 
4
 
5
 
6
 

Поменять flex-элементы рандомно (хаотично, беспорядочно, случайным образом)

  
1
 
2
 
3
 
4
 
5
 
6
 

Свойство order меняет только визуальный порядок

1. сканирование/воспроизведение страницы программами чтения, поисковыми роботами,
2. переход по ссылкам с помощью клавиши клавиатуры Tab , искл., Mozilla Firefox (можно менять с помощью атрибута tabindex ).

Пример: боковую колонку поменять местами с центральной с помощью CSS

длина окна:

  
<article> 
 

5 комментариев:

Галина Молдованова Есть женщины в русских селеньях
С спокойною важностью лиц,
С красивою силой в движеньях,
С походкой, со взглядом цариц,—

Их разве слепой не заметит,
А зрячий о них говорит:
«Пройдет — словно солнце осветит!
Посмотрит — рублем подарит!»

Наталья, спустя только пол года я начала понимать то что вы пишите! Да, у вас нет подробных инструкций для начинающих, но когда начинаешь понимать язык html, то каждая ваша публикация- шедевр. Это не сайт,а находка, настольная книга для блогеров (ИМХО). Спасибо Вам огромное за ваши великолепные труды. Благодаря вам я осталась на этой платформе. А все началось с ваших слов:» Увлеклась html когда начала в сообщениях открывать редактор html (дословно не помню).ВЫ УМНИЧКА. Меня даже восхищают больше не сами статьи( хотя они бесценны) а как вы отвечаете в комментариях. NMitra Спасибо, Галина, за прекрасные слова!

А я подглядываю за зарубежными авторами и тоже плохо понимаю о чём большинство статей написано 🙂 У меня уже куча закладок с пометкой «это интересно, не мешало бы разобраться, как-нибудь, но точно не сейчас», типа https://www.smashingmagazine.com/2016/06/make-music-in-the-browser-with-a-web-audio-theremin/ Самое главное, я приблизительно улавливаю, что можно сделать то-то и какими средствами. А уже когда приходит необходимость, начинаю осваивать тему. Сейчас захотела сделать резиновую карусель с вертикальными миниатюрами http://shpargalkablog.ru/2016/05/gallery-videos.html (статья ещё в разработке), float-ами не очень получилось, вот и вспомнила про флексбоксы.

Зная html, css и js, можно красивые статьи делать, сразу в разряд лидеров уходишь по оформлению. Особенно при написании статей не про код 🙂 Несмотря, что таких статей на «Шпаргалке» мало, количество посетителей с них не маленькое.

Мне не дано красиво и многословно говорить, вымучиваю из себя каждое предложение, переформулирую несколько раз, чтобы сказанное поточнее и покрасочнее отображало действительность, кучу времени трачу именно на приемлемо связанные предложения и проверку орфографии, грамматики. Поэтому в моём случае лучше показать, чем рассказать, отсюда и отсутствие пошаговых инструкций 🙂 NMitra Зато в комментариях отрываюсь 🙂 Галина Молдованова Балуетесь?!))) Разве это отрываетесь, если на каждый вопрос даете точный и вразумительный ответ.

У меня такая же проблема, рассказать все могу и решить проблему в шаблоне, а описать пока сложно! Не гуманитарии мы, а технари!

У вас где-то читала вроде бы, что с математикой не очень дружили? Или я не так поняла?! Хотя я очень и очень сомневаюсь! Лично у меня не состоявшийся физмат, о,5 балла не хватило. А так бы была училка физики и математики!)

Наташа,я обычно люблю идти к цели сама и не надоедать авторам блога. Обращаюсь в крайних случаях, понимаю что все очень заняты.

Но у меня есть к вам очень серьезный вопрос))).Пишу здесь, потому что на нужной мне публикации комментарии у вас закрыты. В общем мне очень нужна ваша помощь, как можно с вами связаться? NMitra С математикой порядок было, с учителем повезло, нравилось. Связь: n.mitra@yandex.ru

Свойство order

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

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

Синтаксис

Пример

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

#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