АКТУАЛЬНО:

Flex – панацея в CSS

Что такое flex в CSS

Продолжаю серию авторских заметок по фронтенду.  Сегодня я покажу на реальном примере как просто и эффективно менять последовательность div блоков на сайте. И все благодаря Flex. Что это такое и “с чем его едят” – читайте в моей небольшой заметке.

Что такое Flex?

Flex – универсальное свойство в CSS (Cascade Style Sheet – каскадные таблицы стилей), которое добавляет блоку или элементу способность гибкого позиционирования – растягивания, сжимания, заполнения пространства, в том числе позволяет компактно изменять последовательность вывода элементов. Современные фронтенд-разработчики и веб-дизайнеры успешно применяют технологию flexbox в создании адаптивных и компактных темплейтов (шаблонов) сайтов.

Как работает свойство Flex?

Много рассказывать не буду. Рассмотрим на реальном примере.

Описание задачи: на сайте расположены 4 блока (div контейнера) с определенным контентом. Они выводятся в стандартном порядке: 1, 2, 3, 4.

Цель: нужно изменить последовательность блоков на мобильных устройствах в новом порядке: 1, 4, 2, 3.

Выполнение задачи:

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

Вот так она выглядит в моем примере:

<div class="content">
<div id="one" class="block1">1</div>
<div id="two" class="block2">2</div>
<div id="three" class="block3">3</div>
<div id="four" class="block4">4</div>
</div>

Родительским классом является .content. Значит ему и нужно добавить свойство flex:

.content {
display: flex;
flex-wrap: wrap;
}

Готово. Теперь можно приступать к изменению последовательности его дочерних блоков. Все что нужно сделать, это каждому классу дочернего элемента прописать свойство order с указанным номером вывода (нумерация начинается от 0).

Вот так:

.block1 {order:0;}
.block4 {order:1;}
.block2 {order:2;}
.block3 {order:3;}

Пример CSS свойства flex

Вот и все) Проще пареной репы!

Но! У нас была другая цель – использовать эту последовательность только на мобильных устройствах (а на desktop’ах выводить стандартно). Для этого нужно к стилям просто добавить CSS-правило (или условие) @media (задаете ширину, на которой стили должны сработать):

@media (max-width: 899px){
.block1 {order:0;}
.block4 {order:1;}
.block2 {order:2;}
.block3 {order:3;}
}

Оценка:
( 2 оценки, среднее 5 из 5 )
Подписка на KRASHENININ.TECH

Получайте регулярные обновления на почту!


Виталий Крашенинин/ автор статьи
Основатель блога, публицист, IT-специалист. Предоставляю услуги по администрированию, техническому обслуживанию, поисковой оптимизации и продвижению веб-сайтов.
Не забудьте поделиться материалом в соцсетях:
KRASHENININ.TECH - блог о веб-технологиях, и не только
Подписаться
Уведомление о
guest
0 Комментарий
Встроенные отзывы
Просмотреть все комментарии
0
Есть мысли? Прокомментируй!x
()
x