[116]
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
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки: