Продолжаю публиковать переводы об особенностях технологии CSS. Флексбокс .
Были опубликованы следующие статьи из цикла:
- Что происходит при создании контейнера Флексбокс .
- Все, что вам нужно знать о выравнивании Флексбокс .
Краткое содержание В последних двух статьях мы рассмотрели, что происходит при создании гибкий -контейнер, а также рассмотрел выравнивание.
На этот раз мы рассмотрим часто сбивающую с толку проблему определения размера Флексбокс .
Как Флексбокс решает, насколько большими должны быть элементы? Это третья часть моей серии о Флексбокс .
В последних двух статьях, которые мы рассмотрели, что происходит, когда вы создаете гибкий контейнер и исследовал выравнивание, как это работает во Flexbox .
На этот раз мы собираемся взглянуть на размеры.
Как мы контролируем размер нашего гибкий элементы и какой выбор делает браузер при настройке размера?
Первоначальное отображение элементов Flex
Если у меня есть набор элементов с внутренним содержимым переменной длины и я установил их в родительский элемент дисплей: гибкий , элементы будут отображаться в виде линии, выровненной от начала главной оси.В приведенном ниже примере три моих элемента имеют небольшой размер содержимого и могут отображать содержимое каждого элемента в виде непрерывной линии.
В конце гибкого контейнера есть пространство, в которое элементы не врастают, поскольку начальное значение свойства равно гибкий рост каждый элемент равен 0, т.е.
им запрещено увеличиваться.
Рисунок 1. Эгибкие элементы имеют место для размещения в одной строке Если я добавлю к этим элементам больше текста, они постепенно заполнят контейнер, и текст начнет переноситься.
«Элементам выделяется часть пространства контейнера, соответствующая количеству текста в каждом — элементу с более длинной строкой текста выделяется больше места.
Это означает, что у нас не получится высокий, тонкий столбец с большим количеством текста, если следующий элемент содержит только одно слово.
Рис_2. Пространство распределено так, чтобы освободить место для более длинного элемента.
Такое поведение, вероятно, вам знакомо, если вы когда-либо использовали Флексбокс .
Но вы, возможно, задавались вопросом, как браузер рассчитывает размер, потому что если вы посмотрите на несколько современных браузеров, вы увидите, что все они делают одно и то же.
Это связано с тем, что подобные функции включены в спецификацию, гарантируя, что каждый, кто реализует Флексбокс в новом браузере или другом пользовательском агенте знает, как должен работать этот расчет. Мы можем использовать спецификацию, чтобы найти эту информацию для себя.
Спецификация CSS для расчета внутренних и внешних размеров (CSS Intrinsic And Extrinsic Sizing)
Ищете информацию о расчетах размеров в спецификации Флексбокс Вы довольно быстро обнаружите, что большая часть необходимой вам информации находится в другой спецификации — Внутреннее и внешнее определение размеров CSS .Это связано с тем, что концепция определения размеров, которую мы используем, не уникальна для Флексбокс , так же как свойства выравнивания не являются уникальными для Флексбокс .
Чтобы узнать, как производится расчет размеров, используемых в Флексбокс , надо смотреть спецификацию Флексбокс .
Это может звучать так, будто вы прыгаете туда-сюда, поэтому я изложу здесь несколько ключевых определений, которые буду использовать в оставшейся части статьи.
Предпочтительный размер
Предпочтительный размер элемент — это размер, заданный шириной или высотой или логическими псевдонимами этих свойств среди встроенный размер И размер блока .С использованием:
или логический псевдоним встроенный размер :.box { width: 500px; }
.
box {
inline-size: 500px;
}
вы заявляете, что хотите, чтобы ваш блок имел ширину 500 пикселей или 500 пикселей на строку.
Минимальный размер контента (MIN-CONTENT SIZE)
Минимальный размер контента — это наименьший размер содержимого, который может разместить элемент без переполнения.Если элемент содержит текст, то необходимо предпринять все меры программного переноса.
Максимальный размер контента (MAX-CONTENT SIZE)
Максимальный размер контента — это наибольший размер содержимого, который может содержать элемент. Если элемент содержит текст без форматирования, он будет выглядеть как одна длинная непрерывная линия.
Основной размер гибкого элемента (FLEX ITEM MAIN SIZE)
Основной размер гибкого элемента – это его размер в главном направлении.Если вы работаете строчкой на английском языке, то основной размер – это ширина.
В английской колонке основным размером является высота.
Элементы также имеют свойства, указывающие минимум и максимум основного размера в основном направлении, определяемые как минимальная ширина или минимальная высота .
Обработка гибких размеров элементов
Теперь, когда мы определили некоторые термины, мы можем посмотреть, как наши гибкие элементы вычисляют размер.Начальные значения свойств flex выглядят так:
- гибкий рост : 0;
- гибкая термоусадка : 1;
- гибкая основа :авто.
Если мы установим гибкая основа равен 0, и гибкий рост равное 1, то все наши элементы не будут иметь начальную ширину, поэтому пространство во флекс-контейнере будет распределяться равномерно, отводя каждому элементу одинаковое количество места.
Между тем, если гибкая основа установить в авто А гибкий рост: 1 , то будет выделено только свободное место, т.е.
пространство без контента.
В ситуации, когда свободного места нет, например когда у нас контента больше, чем может поместиться в одну строку, то ничего не выделяется.
Это показывает нам, что понимание того, что это значит авто , очень важно, если мы хотим знать, как Флексбокс обрабатывает размеры наших элементов.
Значение авто будет нашей отправной точкой.
Определение авто
Когда авто назначенный как значение чего-либо в CSS, он будет иметь очень специфическое значение в этом контексте, которое стоит поискать.Рабочая группа CSS тратит много времени на выяснение того, что это значит. авто в любом контексте, как объяснено этот разговор с редактором спецификаций Fantasai. В спецификации мы можем найти информацию о том, что это означает авто при использовании как гибкая основа .
Термины, определенные выше, должны помочь нам проанализировать это утверждение.
При указании ключевого слова для гибкого элемента авто как " гибкая основа " значение свойства возвращается основной размер .Таким образом, если наш гибкая основа установлен в авто , Флексбокс посмотрю стоимость недвижимости основной размер .Если само это значение авто , то используется значение содержание .
Мы должны иметь основной размер если бы мы дали одному из наших гибких элементов ширину.
В примере ниже все элементы имеют ширину 110 пикселей, поэтому это значение используется как основной размер потому что начальное значение гибкая основа — авто .
Однако в нашем исходном примере есть элементы, у которых нет ширины, а это означает, что их основной размер — авто , и поэтому нам нужно перейти к рассмотрению следующего утверждения: «если это значение само по себе авто , то используется значение содержание .
” Теперь нам нужно посмотреть, что говорит спецификация о ключевом слове содержание .
Это еще одно значение, которое вы можете использовать (при поддержке браузера) для свойства.
гибкая основа , Например: .
item {
flex: 1 1 content;
}
Спецификация определяет содержание следующим образом:
Задает автоматический размер на основе содержимого гибкого элемента.В нашем примере гибких элементов, содержащих текст, мы можем игнорировать некоторые более сложные настройки и рассмотреть содержание какой размер максимальное содержание .(Обычно это эквивалентно размеру максимальное содержание , но с настройками для обработки пропорций формата, внутренних ограничений размера и ортогональных потоков.
Это объясняет, почему, когда у нас есть небольшое количество текста в каждом элементе, текст не переносится.
гибкие элементы имеют значение по умолчанию авто размер, поэтому Флексбокс берет свой размер в собственность максимальное содержание , предметы помещаются в контейнер такого размера, и работа выполнена! На этом история не заканчивается, потому что, когда мы добавляем больше контента, размеры элементов не остаются прежними.
максимальное содержание .
Если бы они это сделали, они бы вырвались из гибкого контейнера и вызвали бы переполнение.
Как только они заполняют контейнер, содержимое начинает перемещаться, и предметы приобретают разные размеры в зависимости от содержимого внутри них.
Разрешить гибкую длину
Именно на этом этапе спецификацию становится довольно сложно просмотреть, но необходимо выполнить следующие шаги: Сначала сложите базовый размер всех элементов и посмотрите, больше или меньше он свободного места контейнера.Если размер контейнера больше суммы, мы спросим о параметре гибкий рост , поскольку у нас есть место для роста элементов.
Рис_3. В первом случае у наших элементов есть свободное пространство для роста.
Если размер контейнера меньше суммы, мы спросим о параметре гибкая термоусадка , так как нам нужно сжать элементы, чтобы они поместились в контейнер.
Рис_4. Во втором случае наши элементы слишком велики и требуют сжатия, чтобы поместиться в контейнер.
Заморозить все неизменяемые элементы, размеры которых уже можно установить.
Если мы используем гибкий рост сюда будут включены все элементы, которые имеют гибкий рост: 0 .
Это тот сценарий, который мы имеем, когда в контейнере гибких элементов остается свободное место.
Начальное значение гибкий рост равно 0, поэтому они становятся такими же большими, как и их собственные Максимальная ширина , и тогда они уже не растут из своих основной размер .
Если мы используем гибкая термоусадка , то сюда войдут все элементы с гибкое сжатие: 0 .
Мы можем увидеть, что произойдет на этом этапе, если мы предоставим наш набор гибких элементов гибкое сжатие: 0 .
Ээлементы замораживаются в состоянии максимальное содержание и поэтому не сгибаются и не помещаются в контейнер.
В нашем случае — при начальных значениях flex-элементов — наши элементы можно сжать.
Таким образом, шаги продолжаются, и алгоритм входит в цикл, в котором он определяет, сколько места нужно назначить или удалить.
В нашем случае мы используем гибкая термоусадка , поскольку общий размер наших элементов больше, чем контейнер, поэтому нам нужно отнять пространство.
Фактор гибкая термоусадка умноженный на внутренний размер элементов, в нашем случае это максимальное содержание размер.
Это имеет смысл для уменьшения пространства.
Если элементы удаляли пространство только в соответствии с соотношением гибкая термоусадка , тогда меньшие элементы могут исчезнуть, когда все их пространство будет удалено, в то время как у более крупного элемента все еще останется место для сжатия.
В этом цикле есть дополнительный этап проверки элементов, которые станут больше или меньше их.
основной размер , в этом случае элемент перестает расти или сжиматься.
Опять же, это сделано для того, чтобы некоторые предметы не становились маленькими или громоздкими по сравнению с остальными.
Все было упрощено с точки зрения спецификации, поскольку я не рассматривал некоторые из наиболее экстремальных сценариев, и вы, как правило, можете просто подумать об этом, предполагая, что вы готовы это позволить.
Флексбокс делай свое дело.
Помните, что в большинстве случаев сработают следующие два факта.
Если вы выросли из авто , Что гибкая основа будет рассматриваться либо как любая ширина или высота элемента, либо максимальное содержание размер.
Тогда пространство будет удалено в соответствии с размером гибкая основа , умноженный на коэффициент гибкая термоусадка , и поэтому удаляется пропорционально максимальному размеру элементов.
Контроль роста и сокращения
Большую часть этой статьи я посвятил описанию того, что делает Flexbox, когда его оставляют на своем устройстве.Конечно, вы можете лучше контролировать свои гибкие элементы, используя гибкие свойства.
Надеемся, они покажутся более предсказуемыми, понимая, что происходит за кулисами.
Установив свой собственный гибкая основа или задав размер самого элемента, который затем используется как гибкая основа , вы возвращаете контроль над алгоритмом, сообщая Флексбокс то, что вы хотите увеличить или уменьшить по сравнению с этим конкретным размером.
Вы можете полностью отключить рост или сжатие, установив опцию гибкий рост или гибкая термоусадка значение 0. Однако на этом этапе стоит временно использовать желание управлять гибкими элементами, чтобы проверить, используете ли вы правильный метод компоновки.
Если вы пытаетесь выровнять гибкие элементы в двух измерениях, вам лучше выбрать макет сетки.
Проблемы отладки связанных измерений
Если ваши гибкие элементы имеют неожиданные размеры, обычно это связано с тем, что ваш гибкая основа В нем есть авто , и есть что-то, что придает этому элементу ширину, которая затем используется как гибкая основа .Проверка элемента в Инструменты разработчика может помочь определить, откуда взялся размер.
Вы также можете попробовать установить гибкая основа до 0, что заставит Флексбокс рассматривать элемент как имеющий нулевую ширину.
Даже если это не тот результат, который вам нужен, это поможет определить ценность гибкая основа используется как виновник ваших проблем с размером.
Гибкие зазоры
Очень востребованная функция Flexbox — это возможность указывать промежутки или промежутки между гибкими элементами точно так же, как мы можем указывать пробелы в макете сетки и макете с несколькими столбцами.Эта функция определена для Флексбокс как часть Выравнивание коробки , и первая реализация браузера уже в пути.
Fire Fox рассчитывает сдать недвижимость зазор для флексбокса Фаерфокс 63 .
Следующий пример можно найти в Firefox Ночной .
Рис_5. Как изображение видно в Firefox 63 Как и в случае с сеткой, длина зазора учитывается перед выделением места для гибкий элементы.
Завершение
В этой статье я постарался объяснить некоторые нюансы того, как Флексбокс обрабатывает приращения элементов гибкий .Это может показаться немного загадочным, однако, потратив некоторое время на понимание того, как это работает, можно сэкономить огромное количество времени при использовании.
Флексбокс в ваших макетах.
Я считаю очень полезным вернуться к тому факту, что по умолчанию Флексбокс пытается предоставить вам наиболее разумное расположение множества элементов разного размера.
Если элемент содержит больше контента, ему выделяется больше места.
Если вы и ваш дизайнер не согласны с тем, что Флексбокс считает лучшим, вы можете вернуть контроль, установив собственное значение для гибкая основа .
Теги: #CSS #веб-дизайн #flexbox
-
Сложная Логическая Задача
19 Oct, 24 -
Мошенничество С Вебмани
19 Oct, 24 -
Gps Трекер Для Iphone
19 Oct, 24
