Основные понятия Flexbox

Flexbox: две оси

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

Главная ось

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

• row
• row-reverse
• column
• column-reverse

Если вы выберете row или row-reverse, ваша главная ось будет проходить в горизонтальном направлении (inline direction).

Если вы выберете column или column-reverse, ваша главная ось будет проходить в вертикальном направлении (block direction).

Побочная ось

Побочная ось проходит перпендикулярно главной оси, поэтому, если свойство flex-direction (главная ось) задано как row или row-reverse, побочная ось будет проходить в вертикальном направлении.

Если свойство flex-direction задано как column или column-reverse, побочная ось будет проходить в горизонтальном направлении.

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

Начало и конец строки

Важно понимать, что flexbox не делает никаких предположений о режиме написания документа. Раньше CSS был сильно ориентирован на горизонтальный режим и режим письма слева направо. Современные методы верстки охватывают полный диапазон режимов письма, и поэтому мы больше не предполагаем, что строка текста будет начинаться в верхнем левом углу документа и будет проходить по направлению к правой стороне, а новые строки будут появляться одна под другой.

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

Если свойству flex-direction задано значение row и вы работаете с английским языком, то начало главной оси будет слева, а конец главной оси – справа.

Если бы вы работаете с арабским языком, то начало главной оси будет справа, а конец главной оси – слева.

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

Спустя некоторое время становится естественным думать о начале и конце оси, а не о левом и правом краях. Это будет полезно для вас при работе с другими методами, такими как CSS Grid Layout, которые следуют тем же шаблонам.

Flex контейнер

Область документа, использующая flexbox, называется flex контейнером. Чтобы создать flex контейнер, мы задаем значение flex или inline-flex для свойства display контейнера. Как только мы делаем это, прямые потомки этого контейнера становятся flex элементами. Как и для всех свойств в CSS, некоторые начальные значения уже определены, поэтому при создании flex-контейнера все содержащиеся в нем flex-элементы будут вести себя следующим образом.

• Элементы отображаются в ряд (свойство flex-direction по умолчанию имеет значение row).
• Позиционирование элементов начинается от начала главной оси.
• Элементы не растягиваются по основной оси, но могут сжиматься.
• Элементы будут растягиваться, чтобы заполнить размер побочной оси.
• Свойству flex-basis задано значение auto.
• Свойству flex-wrap задано значение nowrap.

Результатом этого является то, что все ваши элементы будут выстроены в ряд, используя размер содержимого в качестве их размера на главной оси. Если в контейнере больше элементов, чем можно уместить, они не будут обернуты и контейнер будет переполнен. Если некоторые элементы выше других, все элементы будут вытянуты вдоль побочной оси, чтобы заполнить ось в полный размер.

Свойство flex-basis

Свойство flex-basis определяет размер доступного пространства элемента. Начальное значение этого свойства - auto - в этом случае браузер проверяет, имеют ли элементы размер. В приведенном выше примере все элементы имеют ширину 100px, и этот размер читается браузером как flex-basis.

Если элементы не имеют размера, то для размера flex-basis используется размер контента. Вот почему, когда мы просто объявляем display: flex на родительском элементе для создания flex-элементов, все элементы перемещаются в ряд и занимают столько места, сколько им нужно для отображения их содержимого.

Свойство flex-grow

Если для свойства flex-grow установлено положительное целое число, гибкие элементы могут расти вдоль главной оси от их гибкой основы. Это приведет к тому, что элемент будет растягиваться и займет любое доступное пространство на этой оси или часть доступного пространства, если другим элементам также разрешено расти.

Если бы мы дали всем нашим элементам в приведенном выше примере значение flex-grow равное 1, то доступное пространство в гибком контейнере было бы поровну разделено между нашими элементами, и они растянулись бы, чтобы заполнить контейнер на главной оси.

Свойство flex-grow можно использовать для пропорционального распределения пространства. Если мы дадим нашему первому элементу значение гибкости 2, а другим элементам значение 1, то первому элементу будут переданы 2 части (100 пикселей из 200 пикселей в случае приведенного выше примера), 1 часть друг друга два (по 50 пикселей из 200 пикселей).

Свойство flex-shrink

Если свойство flex-grow имеет дело с добавлением пространства на главной оси, свойство flex-shrink управляет его удалением. Если у нас недостаточно места в контейнере для размещения наших элементов, а для flex-shrink установлено положительное целое число, элемент может стать меньше, чем flex-base. Как и в случае с flex-grow, могут быть назначены разные значения, чтобы один элемент сжимался быстрее, чем другие - элемент с более высоким значением, установленным для flex-shrink, будет сжиматься быстрее, чем его братья и сестры, которые имеют более низкие значения.

Минимальный размер элемента будет приниматься во внимание при расчете фактической величины усадки, которая может произойти, что означает, что гибкость-усадка потенциально может выглядеть менее последовательной, чем гибкость-рост. Поэтому мы более подробно рассмотрим, как работает этот алгоритм, в статье Контроль соотношений элементов вдоль главной оси.