Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Выравнивание элементов по главной оси CSS: Основы Flex

Одна из главных «фишек» 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 первый отступ слева и последний справа будет равен не половине отступа между элементами, а полному.

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

Выравнивание по поперечной оси

Для выравнивания по поперечной оси существует свойство align-content. Оно принимает все те же значения, что и justify-content, но работает по другой оси.

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

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

Документация


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»