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;}

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

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

 @media (max-width: 899px){
.block1 {order:0;}
.block4 {order:1;}
.block2 {order:2;}
.block3 {order: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 {
  width: 1000px;
  background: #E4E6E7;
  line-height: 200px;
  text-align: center;
  margin: 5em auto;
	display:flex;
  flex-wrap:wrap; 
	justify-content:space-between;
}

#one {
  background: red;
  width:200px;
	height: 200px;
}

#two {
  background: green;
  width:200px;
	height: 200px;
}

#three {
  background: yellow;
  width:200px;
	height: 200px;
}

#four {
  background: blue;
  width:200px;
	height: 200px;
}

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