Глава 6. 1. 2. Алгоритм раскладки на флексах

Давайте детально рассмотрим алгоритм расчёта размеров флекс-элементов и распределения этих элементов внутри флекс-контейнера.

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

Этап 1. Определение исходных базовых размеров флекс-элементов

Базовый размер — это размер элемента вдоль главной оси.

Исходный базовый размер — это тот размер, который получается, если к флекс-элементу не применять дополнительные возможности флекс-модели. То есть этот размер зависит от обычных свойств блочной модели (width, height, padding, border) и содержания элемента.

Если главная ось направлена горизонтально, то на исходный базовый размер влияют:

· свойство width или, если width на задано, ширина содержания (например, длина самого длинного слова),

· горизонтальные паддинги,

· горизонтальные рамки.

Если главная ось направлена вертикально, то на исходный базовый размер влияют:

· свойство height или, если height на задано, высота содержания (например, количество текстовых строк),

· вертикальные паддинги,

· вертикальные рамки.

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

А вот с шириной и высотой содержимого, то есть свойствами width или height, всё вышло не так удачно. Главная ось направлена горизонтально — используем одно свойство, повернули главную ось вертикально — используем другое свойство. Поэтому было добавлено ещё одно свойство — flex-basis. Оно задаёт размер области содержания вдоль главной оси, куда бы ось ни была повёрнута. Свойство flex-basis сильнее width и height, оно их переопределит, если встретится с ними на одном и том же флекс-элементе. Можно ли использовать width/height и не использовать flex-basis? Можно. А наоборот? Тоже можно. Просто помните про поведение этих свойств и направление главной оси.

Исходный базовый размер флекс-элемент определяется таким способом:

· 1 шаг:

Если задано свойство flex-basis (его значение отличается от auto), то в качестве размера области содержимого берём значение flex-basis и переходим к 5 шагу. Иначе идём ко 2 шагу.

· 2 шаг:

Если главная ось направлена горизонтально и задано свойство width (его значение отличается от auto), то в качестве размера области содержимого берём значение width и переходим к 5 шагу. Иначе идём к 3 шагу.

· 3 шаг:

Если главная ось направлена вертикально и задано свойство height (его значение отличается от auto), то в качестве размера области содержимого берём значение height и переходим к 5 шагу. Иначе идём к 4 шагу.

· 4 шаг:

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

· 5 шаг:

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

Важное правило: при построении сеток нужно всегда задавать либо flex-basis, либо width/height.

После того как исходный базовый размер всех флекс-элементов определён, браузер может понять, сколько осталось свободного места во флекс-контейнере. И если место осталось, или если места не хватает, то может начать работать «гибкость» флекс-элементов. А это уже второй этап.

Этап 2. Применение гибких размеров и перераспределение свободного пространства

Применение гибких размеров

Начнём сразу с примера. Ширина флекс-контейнера — 500px. Внутри него есть три флекс-элемента, исходный базовый размер каждого из них — 100px. Маргинов нет. Получается, что во флекс-контейнере осталось 500px - 300px = 200px свободного места.

Сетка флексбокса

В обычной блочной модели эти 200px так бы и остались незанятыми, так как размеры элементов определяются в один проход. Внутри флекса размеры элементов пересчитываются несколько раз. И на втором проходе происходит перераспределение свободного пространства. Но только для «гибких» элементов. Причём эта «гибкость» существует двух типов: на растяжение и на сжатие.

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

Один «жадный» элемент

Посмотрите на картинку. Внутри флекс-контейнера есть два флекс-элемента и осталось свободное пространство. Один элемент мы делаем «жадным», задав ему flex-grow: 1, и он съедает это свободное пространство. Если мы обоим элементам зададим flex-grow: 1, то они свободное пространство разделят пополам.

Несколько «жадных» элементов

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

Вернёмся к примеру с флекс-контейнером шириной 500px и флекс-элементами с исходным базовым размером 100px. Если этим флекс-элементам задать flex-grow: 1, то они поделят 200px свободного пространства поровну, то есть каждому достанется по 66.6px, и базовый размер каждого станет равен 166.6px. Заметьте, это уже не исходный базовый размер, а итоговый базовый размер (хотя этот итоговый размер позже ещё может измениться).

Сетка флексбокса

Когда применяется flex-grow? Он нужен для «резиновости» без необходимости соблюдения точных пропорций колонок. Никогда не используйте flex-grow, если вам нужно точно управлять шириной. Например, чтобы каждая колонка была шириной ровно 30% родителя, нужно использовать width: 30% или flex-basis: 30%, но никак не flex-grow.

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

Мы не будем много говорить о flex-shrink, так как оно используется достаточно редко. Действительно, если предвидится большое количество элементов в микросетке, то лучше включить многострочный флекс-контейнер и тогда flex-shrink будет неактуален (за исключением очень редких случаев). Если идёт работа над сеткой, то лучше вообще отключить возможность сжатия у элементов-колонок.