Как поменять блоки местами в css flex

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

Как поменять блоки местами?

Как поменять местами itemsnew-list-item-wrapper с images_box-model-spec с помощью css (wrap, flex. ) ?
Сейчас у меня два блока в линию, левый поменять с правым.

• Вопрос задан более трёх лет назад
• 17445 просмотров

1 комментарий

Простой 1 комментарий

Как поменять блоки местами в CSS?

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

Навигация по статье:

• Меняем блоки местами при помощи float
• Изменяем порядок отображения блоков
• Видеоинструкция

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

Меняем блоки местами при помощи float

Итак, давайте рассмотрим конкретный пример. Предположим у нас есть вот такая страница сайта:

На которой блок с контентом выводится с левой стороны, а сайтбар выводится с правой стороны. Давайте поменяем местами бок сайтбара и блок контента. Сделаем, что бы они у нас располагались наоборот.

Прежде чем приписывать какие-либо CSS-свойства для блоков, нам нужно вычислить класс или идентификатор, который они имеют.

1. Кликаем правой кнопкой по элементу, выбираем «Исследовать элемент» и далее инспектируем его код, что бы видеть какой класс или идентификатор присваивается этому элементу.

В данном случае наш элемент имеет два класса, класс content и класс fleft. Скорее всего, класс content имеет не только этот блок, но еще другие блоки на сайте. Поэтому я буду привязываться к классу fleft, потому, как он выглядит более уникалным.

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

float : right ;

Мы видим код этого блока, и видим, что у него есть класс fright. Копируем его, и для него приписываем наоборот, обтекание по левому краю.

float : left ;

Вот так мы при помощи буквально нескольких строчек кода, очень быстро поменяли их местами.

Изменяем порядок отображения блоков

Теперь давайте рассмотрим еще один пример. Предположим у нас есть страница с вот такой структурой блоков:

Если мы захотим поменять местами блок с текстом и блок с изображением, нам достаточно будет использовать свойство float и задать ему значение left или right. Однако если мы будем адаптировать эту страницу под мобильные устройства, то увидим, что на маленьких экранах, после перестроения в одну колонку, у нас эти блоки выглядят не очень красиво.

У нас идет в первом блоке сначала изображение, а потом текст, во втором сначала текст, а потом изображение, в третьем опять наоборот. Было бы на много красивее и аккуратнее, если бы у нас и после перестроения все блоки выглядели одинаково.

Например, чтобы во всех блоках сначала была бы задана картинка, а затем текст.

При помощи CSS-свойства float мы уже ни как не можем повлиять здесь на порядок расположения элементов. Однако у нас есть еще одно CSS-свойство display:flex, которое поможет нам реализовать данную задачу.

CSS cвойство display:flex предназначено для гибкой компоновки дочерних элементов. Оно имеет много интересных возможностей, и очень активно используется в современной верстке. В ближайшее время я сделаю отдельную статью или видео, посвященное интересным возможностям и нюансам использования этого свойства.

Если в предыдущем примере мы задавали или изменяли CSS-свойство float конкретно для тех элементов, которые мы хотим поменять местами. То здесь нам нужно будет еще обращать внимание на родительские блоки этих элементов.

Предположим у нас есть блок, который имеет класс text-row, внутри этого блока находится еще два блока, это блок с изображением, и блок с текстом. Блок с изображением имеет класс image-block, а блок с текстом имеет класс description-block.

Наша задача задать для родительского блока тех элементов, которые мы хотим переставить местами, CSS-свойство display:flex и свойство flex-flow. В нашем случае это будет выглядеть вот таким образом:

Как поменять порядок div блоков в мобильной версии за счет css

Сегодня, создавая сайт, грамотный разработчик сразу задумывается о его мобильной версии. Очень часто бывает, что в ПК блоки нужно расположить одним образом, а в телефоне поменять местами.

Например, посмотрите на картинку верстки ниже. Здесь используется верстка через float: left для картинки и текста с кнопкой в обоих блоках.

Теперь, если мы уменьшим экран, то картинка дома внизу станет не в нужном месте. Так как в структуре она стоит первой.

А нам нужно достичь такого результата (т.е. поменять местами блок с текстом и картинкой)

Делается это очень просто через display: flex и order . Чтобы проще было понять идею, рассмотрим такую структуру:

Если вы запустите этот пример на своем сайте, то увидите, что последний блок стал первым, предпоследний — вторым и т.д. Чтобы менять порядок блоков мы используем свойство order с указанием порядкового номера блока. Заметьте, счет идет с нуля. Родительскому элементу назначили display: flex; flex-flow: wrap; чтобы можно было сортировать его потомков.

Таким образом при ширине экрана, например, меньшей 768px мы легко можем добавить свойство display: flex; и менять порядок любых html элементов, как нам вздумается.

А вообще рекомендую избавляться от float-а и смело переходить на flex, так как у него гораздо больше возможностей в верстке и он адаптивен на современных платформах.