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

• Выравнивание по поперечной оси
  • Самостоятельное задание
  • Документация

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

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

https://codepen.io/hexlet/pen/bGGbEQe

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

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

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

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

https://codepen.io/hexlet/pen/KKKPzwy

• flex-start. Элементы начинают располагаться с начала контейнера.

https://codepen.io/hexlet/pen/abboZvv

• flex-end. Элементы начинают располагаться с конца контейнера.

https://codepen.io/hexlet/pen/JjjPKGK

• space-between. При этом значении элементы выстраиваются автоматически. Первый элемент строки становится в начало контейнера, последний в конец. Остальные элементы равномерно занимают пустое пространство. В данном случае все отступы по главной оси высчитываются автоматически.

https://codepen.io/hexlet/pen/mddbEEq

• space-around. Более хитрое значение. Элементы, так же, как и при space-between, автоматически получают равное расстояние между соседями. При этом отступы появляются и в начале/конце флекс-контейнера. Эти отступы будут равны половине отступа между элементами.

https://codepen.io/hexlet/pen/YzzKWGx

• space-evenly. Последнее правило, которое устанавливает одинаковые отступы со всех сторон у всех элементов в строке. В отличие от space-around первый отступ слева и последний справа будет равен не половине отступа между элементами, а полному.

https://codepen.io/hexlet/pen/oNNvLGw

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

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

Для выравнивания по поперечной оси существует свойство align-items. Оно принимает следующие значения:

• start
• end
• center
• stretch
• baseline

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

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

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

• justify-content