Css порядок отображения блоков

order

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

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

Кратко

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

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

Пример

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

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

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

Как понять

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

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

Как пишется

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

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

Подсказки

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

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

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

• Chrome 57, Поддерживается 57
• Edge 79, Поддерживается 79
• Firefox 81, Поддерживается 81
• Safari 9, Поддерживается 9

Источник

Способы смены порядка вывода элементов с помощью CSS

В этой статье мы рассмотрим несколько различных методов CSS для переупорядочения вывода элементов HTML.

Цель

Наша раскладка очень простая. В частности, на маленьких экранах (меньше 600px) она будет выглядеть так:

На средних экранах и больше (от 600px) кнопки будут выстраиваться в ряд:

Наша главная задача — поменять порядок кнопок на обратный.

Разметка

Разметка будет самая простая: просто элемент div , содержащий четыре кнопки:

 
Button 1 Button 2 Button 3 Button 4 
 

Стили

На маленьком экране у всех кнопок будут одинаковые стили:

.boxes button < display: block; width: 100%; padding: 15px; border: none; margin-bottom: 5px; box-sizing: border-box; font-size: 1rem; text-align: center; text-decoration: none; background: gold; color: #000; >.boxes button:nth-of-type(even)

На больших экранах мы зададим width: 25% , остальные стили будут определяться методом CSS, который мы будем применять для задания обратного порядка кнопок.

@media screen and (min-width: 600px) < /* we skip this property in flexbox and grid methods */ width: 25%; /* more stuff here */ >

Наконец, у нас будут стили для состояния focus наших кнопок:

Таким образом, если мы будем использовать для навигации клавишу Tab, наши кнопки при фокусировке станут темно-красными.

Методы упорядочивания колонок

Теперь мы готовы проверить различные подходы CSS для вывода кнопок в реверсивном порядке при превышении областью видимости ширины в 599px.

Метод №1: плавающие блоки

Можно просто добавить блокам float: right , вот полные стили:

@media screen and (min-width: 600px) < .boxes button < float: right; width: 25%; >> 

Метод №2: позиционирование

Альтернативным вариантом будет задание позиции элементам, относительной или абсолютной.

По первому варианту (с относительным позиционированием) мы зададим кнопкам, плывущим влево свойство position: relative и затем расставим их с помощью свойство left .

@media screen and (min-width: 600px) < .boxes button < position: relative; float: left; width: 25%; >.boxes button:nth-of-type(1) < left: 75%; >.boxes button:nth-of-type(2) < left: 25%; >.boxes button:nth-of-type(3) < left: -25%; >.boxes button:nth-of-type(4) < left: -75%; >> 

Вторым вариантом (с использованием абсолютного позиционирования) мы зададим нашим кнопкам position: absolute , а с помощью свойства left разместим их более точно.

@media screen and (min-width: 600px) < .boxes < position: relative; >.boxes button < position: absolute; width: 25%; >.boxes button:nth-of-type(1) < left: 75%; >.boxes button:nth-of-type(2) < left: 50%; >.boxes button:nth-of-type(3) < left: 25%; >.boxes button:nth-of-type(4) < left: 0; >> 

Метод №3: свойство direction

Менее очевиден подход на основе свойства direction — оно предназначено для смены направления чтения текста. В нашем случае мы задаем direction: rtl (справа налево) для элемента-обертки, что позволит сменить направление раскладки.

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

Вы можете видеть необходимые стили CSS ниже:

@media screen and (min-width: 600px) < .boxes < display: table; width: 100%; direction: rtl; >.boxes button < display: table-cell; width: 25%; >> 

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

Метод №4: трансформация

Изящным решением будет оставить кнопкам float: left; и затем применить transform: scaleX(-1) к ним и их родителю. Задав отрицательные значения мы сделаем так, что трансформируемый элемент не масштабируется, а переворачивается по горизонтальной оси.

@media screen and (min-width: 600px) < .boxes < transform: scaleX(-1); >.boxes button < float: left; transform: scaleX(-1); width: 25%; >> 

Мы также можем использовать для создания нужного порядка функцию трансформации rotate . Все, что нам надо добавить кнопкам и их родителю свойство transform: rotateY(180deg) .

@media screen and (min-width: 600px) < .boxes < transform: rotateY(180deg); >.boxes button < float: left; transform: rotateY(180deg); width: 25%; >> 

Метод №5: флексбокс

Флексбокс это еще один способ изменения порядка колонок. В нашем примере мы используем два разных свойства флексбокса для создания нашей раскладки.

Первый подход это сделать родительский элемент кнопок флекс-контейнером и затем добавить flex-direction: row-reverse , вот так:

@media screen and (min-width: 600px) < .boxes < display: flex; flex-direction: row-reverse; >> 

Второй вариант с флексбоксом состоит в использовании свойства order для определения порядка, в котором кнопки должны выводиться.

@media screen and (min-width: 600px) < .boxes < display: flex; >.boxes button:nth-of-type(1) < order: 4; >.boxes button:nth-of-type(2) < order: 3; >.boxes button:nth-of-type(3) < order: 2; >.boxes button:nth-of-type(4) < order: 1; >> 

Метод №6: грид-раскладка

Многообещающим решением для расстановки элементов является раскладка на основе CSS Grid. Несмотря на крайне ограниченную поддержку в браузерах на момент написания статьи ее стоит попробовать. Учитывайте, что наш пример будет работать только в Chrome (по умолчанию эта возможность отключена, но ее легко активировать).

Не погружаясь глубоко в детали я опишу два способа с использованием CSS Grid.

Первый вариант это задание родительскому элементу кнопок свойства display: grid; и использование свойства grid-column для определения порядка вывода кнопок. В дополнение мы обеспечим попадание всех кнопок в один ряд путем прямого указания этого — grid-row: 1 .

@media screen and (min-width: 600px) < .boxes < display: grid; grid-template-columns: repeat(4, 1fr); >.boxes button < grid-row: 1; >.boxes button:nth-of-type(1) < grid-column: 4; >.boxes button:nth-of-type(2) < grid-column: 3; >.boxes button:nth-of-type(3) < grid-column: 2; >.boxes button:nth-of-type(4) < grid-column: 1; >> 

Второй вариант использования CSS Grid похож на второй способ использования флексбокса. Мы зададим контейнеру свойство display: grid; , а затем используем свойство order для определения порядка вывода кнопок.

@media screen and (min-width: 600px) < .boxes < display: grid; grid-template-columns: repeat(4, 1fr); >.boxes button:nth-of-type(1) < order: 4; >.boxes button:nth-of-type(2) < order: 3; >.boxes button:nth-of-type(3) < order: 2; >.boxes button:nth-of-type(4) < order: 1; >> 

Напомню, что для тестирования этого метода, вам надо активировать “Experimental Web Platform features” в Chrome.

Порядок исходников и визуальный порядок

Как было показано, мы можем использовать различные подходы CSS для смены порядка наших кнопок. Попробуем пройтись по нашим демо, используя клавиатуру (кликните на пен и нажмите клавишу Tab) для навигации по кнопкам. Вы заметите, что даже, если кнопка с номером 4 выведена первой, фокус сначала появляется на кнопке с номером 1, так как она расположена первой в DOM. То же случится, если мы протестируем наши демо со скринридером (я проводил тесты с NVDA).

Учитывая эту независимость порядка CSS от порядка DOM, нам надо быть крайне осторожными с частями страниц, порядок которых мы изменяем с помощью CSS. Например, свойство флексбокса order это один из наиболее гибких способов для переупорядочения элементов, согласно спецификации:

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

То же самое спецификация говорит о свойстве order CSS Grid.

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

Примечание: если вы используете второй способ с флексбоксом в Firefox, то вы заметите, что навигация с клавиатуры работает отлично и фокус на средних экранах появляется сначала на кнопке №4. Такое поведение является багом.

Заключение

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

• Браузеры, которые вам надо поддерживать. Некоторые из перечисленных подходов не работают в старых версиях Internet Explorer (т.е. < 10).
• Степень сложности перестановки — это может быть что-то простое, как наш пример или что-то более сложное.

Дополнительные материалы

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если мы захотим поменять местами блок с текстом и блок с изображением, нам достаточно будет использовать свойство 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. В нашем случае это будет выглядеть вот таким образом:

Источник