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

Одна из главных "фишек" flex — автоматический просчёт расстояния между блоками. Давайте представим типичную вёрстку списка карточек товара в интернет магазине.

Листинг товаров в интернет-магазине

В данном случае между карточками расстояние по 20 пикселей по горизонтали и вертикали. Попробуем воспроизвести такую структуру, используя свойство float и посмотрим, с какими трудностями мы столкнёмся.

Я намерено убрал весь текст, чтобы вы могли лучше увидеть расположение элементов без перехода на сайт codepen. Обратите внимание, что для указания расстояния между карточками приходится использовать свойство margin, которое будет распространено на все элементы и мы получим ненужный отступ справа у последней карточки, хотя его быть не должно. Эта головная боль повредила нервы не одному поколению разработчиков, которые пытались выкрутится различными способами: используя JavaScript; ручное выставление класса, который отменит отступ; использование псевдокласса :nth-child, который появился только в стандарте CSS3.

С использованием flex данная задача решается одним простым правилом justify-content, которое может принимать одно из следующих основных значений:

все изменения производятся в классе .container

  • center. Все элементы помещаются в центре. Перенесём нашу вёрстку во флекс контейнер и выставим значение justify-content. Для наглядности у body стоит серый фон, а у контейнера белый. Также во второй строке уменьшилось количество элементов для визуальной наглядности работы свойств. Обратите внимание, что элементы на второй строке расположились в центре, сохранив те же отступы между собой, как и в первой строке.
  • flex-start. Элементы начинают располагаться с начала контейнера.
  • flex-end. Элементы начинают располагаться с конца контейнера.
  • space-between. При этом значении элементы выстраиваются автоматически. Первый элемент строки становится в начало контейнера, последний в конец. Остальные элементы равномерно распределяют пустое пространство. В данном случае все отступы по главной оси высчитываются автоматически.
  • space-around. Более хитрое значение. Элементы, также, как и при space-between автоматически получают равное расстояние между соседями. При этом отступы появляются и в начале/конце флекс контейнера. Эти отступы будут равны половине отступа между элементами.
  • space-evenly. Последнее правило, которое устанавливает одинаковые отступы со всех сторон у всех элементов в строке. В отличии от space-around первый отступ слева и последний справа будет равен не половине отступа между элементами, а полному.

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

Самостоятельное задание

Создайте контейнер с несколькими элементами внутри и поставьте ему свойство flex-direction отличное от стандартного. Попробуйте использовать свойство justify-content, чтобы увидеть, как оно заработает. Данная трансформация свойства может быть вначале немного непонятна, но в реальном проекте это очень хороший способ работы с выравниваем блоков.

Мы учим программированию с нуля до стажировки и работы. Попробуйте наш бесплатный курс «Введение в программирование» или полные программы обучения по Node, PHP, Python и Java.

Хекслет

Подробнее о том, почему наше обучение работает →