Как изменить порядок блоков css flexbox

Вертикальная пере­становка блоков средствами CSS

Автор: Марат Таналин Опубликовано: 2011-06-05 Обновлено: 2017-06-28 Краткое описание Кросс­браузерный способ полно­ценной вертикальной пере­становки блоков произвольной высоты средствами CSS.

Современные браузеры — Flexbox

Произвольный порядок

В современных браузерах (в том числе Internet Explorer 11 и Edge) управлять визуальным порядком элементов можно с помощью CSS-свойства order , являющегося частью механизма Flexbox . Блоки следуют в порядке возрастания значений свойства order . Значением свойства order должно быть целое число, которое может быть как положительным, так и отрицательным. Значение по умолчанию — 0 .

.example > .a /* Отобразится третьим */
.example > .b /* Отобразится вторым */
.example > .c /* Отобразится первым */

Объявление display: flex включает Flexbox для элемента-контейнера. Объявление flex-direction: column задаёт вывод дочерних элементов контейнера друг под другом вместо горизонтального вывода, используемого во Flexbox по умолчанию.

Вертикальное положение пере­упорядо­чиваемых блоков является взаимо­зависимым: увеличение высоты любого из блоков приводит к авто­мати­ческому вертикальному сдвигу визуально следующих за ним блоков, в том числе при динамическом изменении высоты блоков, например, вследствие увеличения размера шрифта средствами браузера.

Обратный порядок

Если требуется просто вывести элементы в обратном порядке, можно использовать объявление flex-direction: column-reverse для содержащего их контейнера без необходимости явно задавать расположение каждого элемента:

.example display: flex;
flex-direction: column-reverse;
>

Устаревшие браузеры — display: table

В браузерах, не поддерживающих Flexbox (IE 10 и ниже), вертикальный порядок следования блоков на HTML-странице можно изменить, придав им табличное представление при помощи CSS-свойств семейства display: table . Вне зависимости от порядка расположения блоков в HTML-коде, «шапка» ( display: table-header-group ) такой таблицы отображается в её верхней части, «подвал» ( table-footer-group ) — в нижней, а основная часть таблицы ( table-row-group ) — между ними.

.example display: table;
width: 100%;
>

.example > .a /* Отобразится внизу псевдотаблицы */
.example > .b /* Отобразится посередине */
.example > .c /* Отобразится вверху */

Описанным образом можно изменять порядок до трёх соседних блоков. Дополнительно можно задействовать display: table-caption (отображение блока в роли подписи к таблице) в сочетании с CSS-свойством caption-side со значением top или bottom .

Метод работает в большинстве распространённых браузеров, в том числе в Internet Explorer начиная с версии 9 (IE8 — с оговорками, см. далее).

Internet Explorer 6, 7 и 8 — DOM

Устаревшие браузеры IE6 и IE7 не поддерживают CSS-свойства семейства display: table* .

Кроме того, в IE8 в некоторых случаях наблюдается динамическая ошибка рендеринга: если перемещаемый блок содержит в себе псевдотабличные элементы ( display: table* ) (проявление нюанса замечено только в этом случае), возможно спонтанное пропадание некорых ячеек (всегда разных и в разном количестве) псевдотаблицы при первичной отрисовке страницы.

Поэтому для IE8 и ниже можно отменить CSS-правила, придающие блокам табличный вид, и дополнительно переместить блоки в нужные позиции DOM-дерева HTML-документа уже с помощью JavaScript:

/**
* Перестраивает соседние элементы в DOM-дереве в заданном порядке.
* @param elems Соседние элементы в необходимом порядке.
*/
function reorderElements(elems) // http://tanalin.com/articles/css-block-order/
var count = elems.length;

var parent = elems[0].parentNode;

for (var i = count — 1; i >= 0; i—) parent.insertBefore(elems[i], parent.firstChild);
>
>

Определение возможностей браузера

Использовать разные стили для современных и устаревших браузеров можно путём определения возможностей браузера средствами JavaScript.

Определить, поддерживает ли браузер Flexbox, можно путём проверки существования свойства order объекта, доступного через свойство style корневого элемента документа ( ) — document.documentElement .

Версию Internet Explorer можно определить путём проверки существования нестандартного объекта document.all , доступного только в IE 10 и ниже, в сочетании с существованием или отсутствием одного из стандартных объектов.

if (‘order’ in document.documentElement.style) // Flexbox-совместимый браузер.
// Используем `order` или `flex-direction: column-reverse`.
>
else if (document.all && !document.addEventListener) // IE8 или ниже.
// Изменяем реальный порядок блоков в DOM-дереве средствами JS.
>
else // Браузер без поддержки Flexbox, в том числе IE 9/10.
// Используем `display: table`.
>

Перепечатка любых материалов сайта в любом объёме запрещена

Источник

Порядок следования 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

Источник