1. Начальное отображение элементов Flex
2. Предпочитаемый размер
3. Размер минимального содержимого
4. Максимальный размер содержимого
5. Основной элемент Flex
6. Разработка размера элемента Flex
7. Определение Авто
8. Разрешение гибких длин
9. Контроль роста и сокращения
10. Отладка по размеру
11. Flex Gaps
12. Завершение

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

Это третья часть моей серии о Flexbox. В последних двух статьях мы рассмотрели что происходит, когда вы создаете гибкий контейнер и исследовал выравнивание, как это работает во Flexbox , На этот раз мы рассмотрим размеры. Как мы контролируем размер наших гибких элементов и какой выбор делает браузер, когда он контролирует размер?

Начальное отображение элементов Flex

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

У гибких элементов есть место, чтобы каждый отображался в одной строке ( Большой предварительный просмотр )

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

Пространство распределяется, чтобы дать больше места более длинному предмету ( Большой предварительный просмотр )

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

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

Предпочитаемый размер

предпочтительный размер блока - это размер, определяемый шириной или высотой, или логические псевдонимы для этих свойств inline-size и block-size. Используя:

.box {ширина: 500 пикселей; }

Или логический псевдоним inline-size:

.box {inline-size: 500px; }

Вы утверждаете, что хотите, чтобы ваш ящик имел ширину 500 пикселей или 500 пикселей в линейном направлении.

Размер минимального содержимого

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

Максимальный размер содержимого

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

Основной элемент Flex

основной размер гибкого элемента - это размер, который он имеет в основном измерении. Если вы работаете в ряд - на английском - тогда основным размером является ширина. В колонке на английском языке основным размером является высота.

Элементы также имеют минимальный и максимальный основной размер, определяемый их минимальной шириной или минимальной высотой в основном измерении.

Разработка размера элемента Flex

Теперь, когда у нас есть определенные термины, мы можем посмотреть, как измеряются наши гибкие элементы. Начальное значение свойств flex:

• flex-grow: 0
• гибкая термоусадка: 1
• flex-base: auto

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

Увидеть перо Smashing Flexbox Series 3: flex: 1 1 0; Рэйчел Эндрю ( @rachelandrew ) на CodePen ,

Увидеть перо Smashing Flexbox Series 3: flex: 1 1 0; Рэйчел Эндрю ( @rachelandrew ) на CodePen ,

Принимая во внимание, что если flex-base имеет значение auto, а flex-grow: 1, то распределяется только свободное место с учетом размера содержимого.

Увидеть перо Smashing Flexbox Series 3: гибкий: 1 1 авто краткий текст Рэйчел Эндрю ( @rachelandrew ) на CodePen ,

Увидеть перо Smashing Flexbox Series 3: гибкий: 1 1 авто краткий текст Рэйчел Эндрю ( @rachelandrew ) на CodePen ,

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

Увидеть перо Smashing Flexbox Series 3: flex: 1 1 авто длинный текст Рэйчел Эндрю ( @rachelandrew ) на CodePen ,

Увидеть перо Smashing Flexbox Series 3: flex: 1 1 авто длинный текст Рэйчел Эндрю ( @rachelandrew ) на CodePen ,

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

Определение Авто

Когда auto определено как значение для чего-то в CSS, в этом контексте оно будет иметь очень специфическое значение, на которое стоит обратить внимание. Рабочая группа CSS тратит много времени на выяснение того, что означает авто в любом контексте, а этот разговор для специалиста редактора Fantasai объясняет ,

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

«При указании на элементе flex ключевое слово auto извлекает значение свойства main size как использованную« flex-based ». Если это значение само по себе auto, тогда используемым значением является `content`.”

Таким образом, если наш flex-base имеет значение auto, Flexbox проверяет определенное свойство main size. У нас был бы основной размер, если бы мы дали ширину любому из наших элементов flex. В приведенном ниже примере все элементы имеют ширину 110px, так что это используется в качестве основного размера, поскольку начальное значение для flex-based - auto.

Увидеть перо Smashing Flexbox Series 3: гибкие элементы шириной Рэйчел Эндрю ( @rachelandrew ) на CodePen ,

Увидеть перо Smashing Flexbox Series 3: гибкие элементы шириной Рэйчел Эндрю ( @rachelandrew ) на CodePen ,

Тем не менее, в нашем первоначальном примере есть элементы, которые не имеют ширины, это означает, что их основной размер - auto, и поэтому нам нужно перейти к следующему предложению: «Если это значение само по себе auto, то используемое значение является содержимым».

Теперь нам нужно посмотреть, что спецификация говорит о ключевом слове контента. Это еще одно значение, которое вы можете использовать (в поддержке браузеров) для своей flex-основы, например:

.item {flex: 1 1 содержание; }

Спецификация определяет содержание следующим образом:

«Указывает автоматический размер в зависимости от содержимого элемента Flex. (Как правило, это эквивалентно максимальному размеру контента, но с корректировками для обработки форматных соотношений, внутренних ограничений размеров и ортогональных потоков »

В нашем примере с элементами flex, содержащими текст, мы можем игнорировать некоторые из более сложных настроек и рассматривать контент как максимальный размер контента.

Это объясняет, почему, когда у нас есть небольшое количество текста в каждом элементе, текст не переносится. Гибкие элементы имеют автоматический размер, поэтому Flexbox смотрит на их максимальный размер содержимого, элементы помещаются в их контейнер в этом размере, и работа выполнена!

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

Разрешение гибких длин

Именно в этот момент спецификация становится достаточно сложной, однако необходимо выполнить следующие шаги:

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

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

В первом случае у наших предметов есть свободное пространство для роста. ( Большой предварительный просмотр )

Если размер контейнера меньше общего, тогда мы будем заботиться о коэффициенте сгибания-изгиба, так как нам нужно сжиматься.

Во втором случае наши предметы слишком велики и должны сжиматься, чтобы поместиться в контейнер. ( Большой предварительный просмотр )

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

Если мы используем flex-shrink, то это будет включать любые элементы с flex-shrink: 0. Мы можем видеть, что произойдет на этом шаге, если мы дадим нашему набору flex-элементов коэффициент flex-shrink, равный 0. Элементы замораживаются в своих Состояние max-content и т. д. не сгибается и устраивается, чтобы поместиться в контейнер.

Увидеть перо Smashing Flexbox Series 3: гибкий: 0 0 авто Рэйчел Эндрю ( @rachelandrew ) на CodePen ,

Увидеть перо Smashing Flexbox Series 3: гибкий: 0 0 авто Рэйчел Эндрю ( @rachelandrew ) на CodePen ,

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

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

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

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

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

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

Контроль роста и сокращения

Я провел большую часть этой статьи, описывая, что делает Flexbox, когда он оставлен на его собственные устройства. Конечно, вы можете лучше контролировать свои изгибаемые элементы, используя свойства flex. Надеюсь, они будут казаться более предсказуемыми с пониманием того, что происходит за кулисами.

Устанавливая свою собственную flex-основу или давая самому элементу размер, который затем используется в качестве flex-основы, вы берете обратно управление из алгоритма, сообщая Flexbox, что вы хотите расти или уменьшаться от этого конкретного размера. Вы можете отключить увеличение или сжатие, установив flex-grow или flex-shrink на 0. Однако на этом этапе стоит использовать желание контролировать элементы Flex как время, чтобы проверить, используете ли вы правильный метод макета. Если вы обнаружите, что пытаетесь выстроить гибкие элементы в двух измерениях, то вам лучше выбрать Grid Layout.

Отладка по размеру

Если ваши flex-элементы имеют неожиданный размер, то обычно это происходит из-за того, что ваша flex-основа имеет значение auto, и есть что-то, придающее этому элементу ширину, которая затем используется в качестве flex-base. Проверка элемента в DevTools может помочь определить, откуда берется размер. Вы также можете попробовать установить flex-based 0, что заставит Flexbox рассматривать элемент как имеющий нулевую ширину. Даже если это не тот результат, который вам нужен, он поможет определить используемое значение гибкого базиса как виновника ваших проблем с размерами.

Flex Gaps

Наиболее востребованная особенность Flexbox - возможность задавать промежутки или желоба между элементами Flex таким же образом, как мы можем указывать промежутки в разметке сетки и многоколоночной разметке. Эта функция указана для Flexbox как часть выравнивания Box, и первая реализация браузера уже в пути. Ожидается, что Firefox предоставит свойства промежутка для Flexbox в Firefox 63. Следующий пример можно посмотреть в Firefox Nightly.

Увидеть перо Smashing Flexbox Series 3: гибкие зазоры Рэйчел Эндрю ( @rachelandrew ) на CodePen ,

Увидеть перо Smashing Flexbox Series 3: гибкие зазоры Рэйчел Эндрю ( @rachelandrew ) на CodePen , Изображение как видно в Firefox 63 ( Большой предварительный просмотр )

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

Завершение

В этой статье я попытался объяснить некоторые тонкости того, как Flexbox работает с размерами элементов flex. Однако это может показаться немного академичным, если вы потратите некоторое время на то, чтобы понять, как это работает, и сэкономит вам огромное количество времени при использовании Flexbox в ваших макетах. Я считаю действительно полезным вернуться к тому факту, что по умолчанию Flexbox пытается предоставить вам наиболее разумную компоновку набора элементов с различными размерами. Если элемент имеет больше контента, ему дается больше места. Если вы и ваш дизайн не согласны с тем, что Flexbox считает лучшим, вы можете вернуть себе контроль, установив свою собственную основу Flex.

Похожие

Комментарии