Flex order не работает

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

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

order

initial 0 inherit наследует значение родителя unset 0

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

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

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

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

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

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

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

То есть по прежнему в порядке, указанном в HTML-коде, будет осуществляться

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

Автор изображения [adrianroselli.com]

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

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 балла не хватило. А так бы была училка физики и математики!)

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

Источник

Как использовать свойство order во флексбоксах, не вызывая хаоса

Недавняя твиттерная суматоха вынудила меня сделать наконец демо с флексбоксами, которое я хотела создать еще с тех пор, как впервые начала экспериментировать с flex-свойствами CSS.

Рома Комаров поделился исследованием, как с помощью флексбоксов и CSS-свойства order получить эффект сортировки таблицы на чистом CSS. Другие CSS-эксперты тотчас выступили с предупреждением, что такой подход не рекомендуется, а то и вовсе прямо противоречит спецификации.

Рома принял критику и добавил в статью предостережение: это лишь эксперимент, не пытайтесь повторить это в продакшне! Но в твиттерном обсуждении люди задавали вопрос, всплывающий снова и снова:

Для чего же тогда вообще свойство ‘order’? Если его применение — это случай, когда «визуальный порядок отличается от исходного», то почему это условие не может выполняться и при других способах вывода?

Для начала давайте рассмотрим, как не надо использовать order , и почему.

Визуально неотразимый порядок не всегда отвечает смысловому. Фото Юхана Сонина, из Wikimedia Commons.

Авторы должны использовать order только для визуального, а не логического, переупорядочивания контента. Стили, использующие order ради логического переупорядочивания, нарушают стандарт.

Для CSS-спецификаций крайне нехарактерны такие явные запреты для авторов. Большинство тамошних «должны» адресовано разработчикам браузеров. Так что раз они, образно говоря, требуют предъявлять специальный ордер на использование свойства order — это дело серьезное. Пользователи клавиатуры и скринридеров полагаются на предсказуемый порядок элементов в DOM, и если такие пользователи видят экран, то им важно, чтобы этот порядок соответствовал наглядному логическому порядку элементов.

Да, верстка колонок на флоатах тоже позволяла (а то и вынуждала) использовать в коде другой порядок, не совпадающий с визуальным. Но ведь как раз поэтому мы и стремимся уйти от верстки на флоатах! Флексбоксы и CSS-гриды призваны упростить использование логичной структуры в разметке — а вовсе не помогать делать вид, что структура разметки не имеет значения.

Чтобы переупорядочить DOM, меняйте элементы местами с помощью DOM-методов, а не CSS-методов, влияющих только на визуальную раскладку.

Так почему же order существует? Зачем свойство order в CSS, если CSS не предназначен для переупорядочивания контента?

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

Или как более изящно выразилась редактор спецификации флексбоксов Элика Этемад (известная как fantasai):

Зрительное восприятие не подчиняется порядку в системе координат. На него влияют принципы гештальта (целостного образа — прим. перев.) и т.п., и в нем бывает одновременность, которой речь, например, передать не может. Так что мы упорядочиваем исходник по порядку чтения, а визуальной раскладке даем больше свободы в размещении элементов.

Олимпийский пьедестал почета — мой любимый пример необычного порядка в раскладке, который, тем не менее, понятен всем. Именно это демо я намечала себе целых два года (и надо же, какая удача, что у меня наконец дошли руки до него как раз во время олимпиады!).

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

Я использовала похожий порядок «сначала центр» для навигации на сайте в поддержку моей книги «Использование SVG». В «шапке» там у меня три навигационных ссылки:

• Список глав
• Предыдущая глава
• Следующая глава

Если записать это как один список, то логический порядок именно такой. Но в верстке логично, чтобы «предыдущая» ссылка была с краю слева, «следующая» — с краю справа, а ссылка на оглавление — между ними. Флексбоксами я могу добиться этого без возни с флоатами и лишними дивами-обертками.

Улучшенный порядок на этом сайте включается по медиавыражению min-width. На более узких экранах ссылка на оглавление занимает всю первую строку раскладки на флексбоксах, а ссылки «следующая» и «предыдущая» переносятся на отдельную строку (или даже на две строки, если экран очень узкий по отношению к размеру шрифта).

Аналогично, в примере с пьедесталом у меня есть медиавыражение max-width, чтобы убрать свойство order на узких экранах (наряду с другими мелкими правками стилей) и восстановить обычный порядок списка для одноколоночной раскладки.

P.S. Это тоже может быть интересно:

Если вам понравилась статья, поделитесь ей!

Источник

Полное руководство по назначению и изменению order во Flexbox

Russian (Pусский) translation by Pembelight (you can also view the original English article)

Flexbox позволяет нам размещать флекс-элементы в любом порядке и направлении. Распределение порядка элементов с flexbox проще, чем с помощью float или CSS-сетки, даже если вы с этим не согласны. Поскольку flexbox — это модель одномерного макета, в отличие от CSS-сетки, которая является двумерной, вам нужно обращать внимание только на одно направление. W3C четко определелил правила, поэтому вам больше не придется иметь дело с float и clearfix.

В данном уроке вы узнаете, как использовать следующие свойства flexbox для расстановки элементов:

Расстановка Vs. Перестановка элементов

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

Что такое расстановка?

Когда мы настраиваем макет flexbox, сначала нужно определить исходный порядок, то есть мы должны решить, как позиционируются оси flex контейнера. Я подробно описал flexbox оси в своем уроке по выравниванию flexbox.

Вкратце, каждый flex контейнер имеет две оси: главную и поперечную. Главная ось будет иметь одно из четырех направлений, а поперечная ось всегда перпендикулярна первой:

1. слева направо
2. справа налево
3. сверху вниз
4. снизу вверх

Поперечная ось всегда перпендикулярна к главной.

Мы устанавливаем главную ось с помощью свойства flex-direction , а затем решаем, как будут ужиматься flex элементы, используя свойство flex-wrap . Эти два свойства определяют, каким образом браузер разместит элементы в flex контейнере.

Так что же такое перестановка элементов?

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

Используя такие возможности flexbox, нам не приходится менять структуру HTML документа только ради его визуального отображения. Таким образом, скринридеры (и поисковые системы) считывают логически структурированный контент (например, боковая панель не имеет приоритета над основным контентом).

Свойство оrder для Flexbox

Порядок элементов во Flexbox происходит со свойствами flex-direction и flex-wrap: flex-direction указывает направление главной оси. Свойство оrder может принимать следующие значения:

1. row (по умолчанию) главной оси: слева направо
2. row-reverse главной оси: справа налево
3. column главной оси : сверху вниз
4. column-reverse главной оси: снизу вверх

Flex-wrap определяет, расположены ли flex-элементы в один ряд или в несколько. Он также контролирует направление поперечной оси. Может иметь три значения:

1. nowrap (по умолчанию) размещает flex-элементы в одну строку; поперечная ось стоит в положении по умолчанию
2. wrap размещает flex-элементы в несколько строк; поперечная ось стоит в положении по умолчанию
3. wrap-reverse размещает flex-элементы в несколько строк; поперечная ось в обратном порядке

Положение поперечной оси по умолчанию:

• сверху вниз в случае row и row-reverse
• слева направо в случае column и column-reverse

В моей предыдущей статье о выравнивании flexbox вы можете найти четыре подробных примера (с демонстрациями) о том, как настроить основную ось в четырех разных направлениях, используя свойство flex-direction . Однако, когда возникает вопрос расстановки элементов во флексбоксе, по моему мнению более важно знать, как совместно использовать свойства flex-direction и flex-wrap для достижения грамотного исходного кода.

Пример шорткода

Мы используем простой код, чтобы увидеть, как работает flexbox расстановка элементов. В данном примере HTML состоит из нескольких элементов:

Элемент .container div будет flex-контейнером, а div с классом .item будут flex-элементами. Мы будем использовать (почти) один и тот же CSS код во всех примерах, только поменяются свойства flex-direction и flex-wrap . Вот как выглядит наш CSS со значениями row и wrap :

Тот же пример в демонстрации на CodePen:

Расстановка элементов с помощью Row и Column

Теперь мы действительно дошли до самого интересного! Теоретически понять принцип расстановки элементв с помощью флексбокса не так уж и сложно, но на практике, безусловно, могут возникать проблемы. Это происходит из-за того, что трудно предугадать, как разные варианты направления flex-direction и flex-wrap комбинируются между собой.

В подключенном ниже примере вы увидите, как макеты flex-direction: row и flex-direction: column взаимодействуют между собой с разными значениями свойства flex-wrap . Используйте выпадающие списки, чтобы увидеть их комбинации.

Как вы видите, когда flex-direction является row , flex-элементы располагаются горизонтально слева направо. Когда вместо wrap мы используем wrap-reverse , flexbox начинает выкладывать элементы снизу вверх, а не наоборот. Это происходит потому, что wrap-reverse меняет направление перпендикулярной оси.

Когда flex-direction это column , элементы располагаются вертикально сверху вниз. И когда мы используем wrap-reverse вместо wrap , flexbox начинает размещать элементы справа (теперь это начальная точка поперечной оси), а не слева.

Расстановка элементов с помощью row-reverse и column-reverse

Теперь давайте посмотрим на то, как flexbox размещает элементы, когда flex-direction — это row-reverse и column-reverse .

Как видно из демонстрации выше, в обоих случаях flexbox начинает выкладывать элементы, как и раньше, с начала по главной оси. Главная ось row-reverse проходит справа налево, поэтому flexbox начинает раскладывать элементы справа. Кроме того, главная ось макета column-reverse проходит снизу вверх, поэтому элементы начинают размещаться снизу вверх flex контейнера.

Когда мы используем flex-wrap: wrap , flexbox начинает размещать элементы со свойством flex-direction : сверху row-reverse , и слева column-reverse , так как они соответсвенно являются начальными точками поперечной оси.

Когда мы меняем направление на flex-wrap: wrap-reverse , поперечная ось будет двигаться в противоположном направлении. Она будет размещать элементы при flex-direction снизу вверх row-reverse и справа налево при column-reverse .

Ускорьте процесс с помощью flex-flow

Также значения flex-direction и flex-wrap могут применяться к одному классному CSS свойству. Оно называется flex-flow. Чтобы его использовать, нам нужно прописать эти два значения вместе, как это сделано ниже:

Перестановка элементов в Flexbox

Пришло время взглянуть на вещи немного по-другому.

Свойство order изменяет порядок по умолчанию для flex-элементов, который мы определяем с помощью flex-direction и flex-flow . Он влияет только на визуальное расположение элементов, но он не влияет на то, как скринридеры и другие пользовательские агенты, не относящиеся к CSS, читают исходный код.

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

В следующем примере .item-3 перемещается в начальную точку главной оси. Поскольку все элементы имеют значение по умолчанию 0, достаточно использовать правило order: -1 , чтобы сделать его первым элементом в контейнере:

Вы заметили, что эту же логику можно использовать для перемещения .item-3 к концу главной оси. Для этого нам только нужно назначить положительное значение свойства order .

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

Порядок и доступность

Самое важное — это то, что свойство order не влияет на порядок стилизации, контент и логическую навигацию элементов. Это значит, что когда мы изменяем порядок наших flex элементов, невизуальные ползователи не заметят изменения. Например, люди, использующие навигацию с помощью клавиатуры, будут по-прежнему перемещаться по ссылкам в исходном порядке.

Такое поведение flexbox может пригодиться в некоторых случаях. Например, можно сделать так называемый «Макет Святого Грааля» доступным с помощью порядка во флексбоксе. Макет Святого Грааля — это популярный макет блога с хедером, футером и двумя боковыми сайдбарами: слева и справа от основного контента.

В HTML коде этого макета мы обычно ставим левый сайдбар перед основным содержимым. Однако с точки зрения доступности пользователи вспомогательных технологий должны в первую очередь знакомиться с основным контентом. Flexbox с этим справляется идеально. В нашей разметке мы можем разместить основной контент перед двумя боковыми панелями. Затем нам остается только правильно позиционировать сайдбар и основное содержимое, используя свойство order :

Flexbox & Writing Modes

Все сказанное в этом уроке относится к режиму записи LTR (left to right — слева направо). Оси Flexbox фактически следуют направлению письма документа, которое можно настроить с помощью свойств direction и writing-mode. Вот почему в режиме записи LTR главная ось движется слева направо, когда flex-direction является row . В режиме записи RTL (right to left — справа налево) он работает в противоположном направлении, справа налево, и все остальное меняется соответственно.

Это (Flex) Wrap!

Этот урок был второй частью из моей серии по flexbox. Обязательно прочитайте первую часть о выравнивании flexbox, чтобы узнать, как выровнять flex-элементы вдоль главной и поперечной оси. Если вы хотите больше узнать о расстановке элементов во flexbox, MDN предлагает очень информативную статью на данную тему.

Источник