[118]
23 Ноя 2014, 20:36

Поменять местами два соседних элемента только на CSS

Сегодня экспериментировал с CSS FlexBox и обнаружил, что у flex-блоков может быть установлено свойство order, которое отвечает за порядок следования элементов в контейнере.

Просто приведу простейший пример для div элементов.

HTML

Первый элемент
Второй элемент

CSS

.item { display: flex; /* Указываем что это flex-конейнер*/ flex-direction: column; /* Задаем напревления оси*/ }
.item .header { order: 3; }
.item .body { order: 1; }
.item .footer { order: 2; }

Результат:
Второй элемент
Третий элемент
Первый элемент

Это может быть полезно, если вам приходит какой-нибудь уже сформировавшийся HTML код, который нужно только стилизовать.

#html, #html5, #css

Комментарии (0)

Добавить комментарий

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Нетология
Лучшее
[49]
17 Сен 2011, 15:13
FileZilla перетаскивание файлов
[просмотров 980]
[2]
26 Июн 2018, 23:10
Как в React сделать поле input file с кнопкой?
[просмотров 972]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 838]
[58]
29 мая 2012, 12:08
Узнать версию PHP из командной строки
[просмотров 831]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 826]
[118]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 807]
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 766]
[4]
19 Июн 2018, 16:24
React и ReactDOM
[просмотров 665]
Aliexpress WW