Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Глава 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 будет неактуален (за исключением очень редких случаев). Если идёт работа над сеткой, то лучше вообще отключить возможность сжатия у элементов-колонок.
|
||||||
Последнее изменение этой страницы: 2021-01-14; просмотров: 159; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.221.129.19 (0.006 с.) |