Базовый метод flexbox layout знаком всем, я использую 66 flexbox макетов для ежедневных рисунков, гибкую верстку и адаптацию под разные мобильные устройства, но мой коллега спросил меня: "Я умею считать flex. Это правильно?", я был в замешательстве, и я этого тоже не знал, так как я в этом не разбираюсь, я должен это выучить 🤦♀️, и написать своему будущему парню.
сомневаться:
1. Как уменьшить размер, чтобы избежать переполнения родительского элемента?
2. Как увеличить размер, чтобы заполнить неиспользуемое пространство?
напиши сегодняflex
из收缩算法
Для коллег и будущих бойфрендов. Если вы хотите ознакомиться с основами гибкости, вы можете перейти кflex MDN, если вы посмотрите наflex收缩算法
Вы пришли в нужное место, там есть немного математики, но это довольно просто. Чтобы выяснить, сколько места доступно для flex-потомков, браузер должен знать, насколько большим должен быть элемент для запуска. Далее давайте посмотрим, как элементы рассчитываются в различных ситуациях.
1. Как уменьшить размер, чтобы избежать переполнения родительского элемента?
Возьмем пример 🌰 (когда коэффициент сжатия проекта больше 1):
Контейнер шириной 500 пикселей содержит три элемента размером 150, 200 и 250 пикселей. Установите flex-shrink на 2 и 3 для элемента 1 и элемента 2 соответственно. Элемент 3 не задан, а значение flex-shrink по умолчанию равно 1.
Шаг 1: Рассчитайте значение переполнения элемента
500 - (150 + 200 + 250) = -100px
Шаг 2: Рассчитайте ширину каждого элемента, умноженную на общий вес flex-shrink.
150 × 2 + 200 × 3+ 250 × 1 = 1150
Шаг 3: Рассчитайте размер сжатого пространства каждого проекта
Общее пространство переполнения × ширина элемента × flex-shrink / общий вес.Если значение десятичное, оно будет округлено в меньшую сторону.
- Окончательная ширина item1: 150 - 100 × 150 × 2 / 1150 ≈ 123
- Окончательная ширина item2: 200 - 100 × 200 × 3 / 1150 ≈ 147
- Окончательная ширина элемента 3: 250 - 100 × 250 × 1 / 1150 ≈ 228
Второй 🌰 (когда сумма коэффициентов сжатия предметов меньше 1):
Контейнер шириной 500 пикселей содержит три элемента размером 150 пикселей, 200 пикселей и 250 пикселей. Установите flex-shrink на 0,1, 0,2 и 0,3 для элемента 1, элемента 2 и элемента 3 соответственно.
Шаг 1: Рассчитайте значение переполнения элемента
500 - (150 + 200 + 250) = -100px
Пространство переполнения = значение переполнения × (сумма коэффициента сжатия / 1):
Пространство переполнения: 100 × (0,1 + 0,2 + 0,3) / 1 = 60
Шаг 2: Рассчитайте ширину каждого элемента, умноженную на общий вес flex-shrink.
Общий вес равен 150 × 0,1 + 200 × 0,2 + 250 × 0,3 = 130.
Шаг 3: Рассчитайте размер сжатого пространства каждого проекта
Фактический размер предмета = указанная ширина предмета - свободное пространство × ширина предмета × коэффициент усадки / общий вес
- Окончательная ширина элемента 1: 150–60 × 150 × 0,1/130 ≈ 143 пикселя.
- Окончательная ширина элемента2: 200–60 × 200 × 0,2/130 ≈ 181 пикс.
- Окончательная ширина элемента 3: 250–60 × 250 × 0,3/130 ≈ 215 пикселей.
Когда элемент переполняется в направлении главной оси, сжатие элемента для соответствия контейнеру с помощью установки коэффициента сжатия элемента заканчивается. Сначала выпейте чаю, сделайте перерыв и продолжайте смотреть, как проект расширяется, чтобы заполнить контейнер, когда он не может поместиться на главной оси.
2. Как увеличить размер, чтобы заполнить неиспользуемое пространство?
Например 🌰 (когда коэффициент расширения проекта больше 1):
Контейнер шириной 500 пикселей содержит три элемента размером 120, 150 и 200 пикселей. Установите flex-grow на 2 и 1 для элемента 1 и элемента 2 соответственно. Элемент 3 не задан, а значение flex-grow по умолчанию равно 0.
Шаг 1: Рассчитайте оставшееся пространство контейнера
500 - (120 + 150 + 200) = 30px
Шаг 2: Выделите оставшееся место
30px / ( 2+ 1 + 0) = 10px
Шаг 3: Рассчитайте размер пространства расширения каждого проекта
Ширина проекта + (квота расширения на акцию / коэффициент расширения текущего проекта)
- Окончательная ширина элемента 1: 120 + 10 × 2 = 140.
- Окончательная ширина item2: 150 + 10 × 1 = 160.
- Окончательная ширина элемента 3: 200 + 10 × 0 = 200.
Последний 🌰 (когда коэффициенты расширения предметов в сумме меньше 1):
Контейнер шириной 500 пикселей содержит три элемента размером 120, 150 и 200 пикселей. Установите для flex-grow значения 0,3, 0,2 и 0,1 для элемента 1, элемента 2 и элемента 3 соответственно.
Шаг 1: Рассчитайте оставшееся пространство контейнера
500 - (120 + 150 + 200) = 30px
Шаг 2: Выделите оставшееся место
Flex-grow add 0,3 + 0,2 + 0,1 = 0,6
Оставшееся пространство делится на 30/1 = 30px.
Шаг 3: Рассчитайте размер пространства расширения каждого проекта
Свободная ширина проекта + оставшееся пространство × (каждая квота расширения / 1) ≈ фактическая ширина проекта
- Окончательная ширина элемента 1: 120 + 30 × (0,3/1) = 129.
- Окончательная ширина item2: 150 + 30 × (0,2/1) = 156
- Конечная ширина элемента3: 200 + 30 × (0,1 / 1) = 209
Спасибо @xoyoz @SYJ 🐬 за исправление. Когда сумма flex-grow всех дочерних элементов меньше 1, все оставшееся пространство не будет выделено дочерним элементам.
резюме
Мама, все наконец закончилось. Кашель кашель! Я наконец-то разобралась с алгоритмом сжатия флекса, и флекс, который я написала своему будущему парню, закончился✌ . ️Если этот документ также полезен для вас, не забудьте поставить лайк, прокомментировать и подписаться на тройной щелчок 😝
Вышеупомянутое содержание является моим собственным резюме, это неизбежно, что будут ошибки или недоразумения.Если у вас есть какие-либо вопросы, я надеюсь, что вы оставите сообщение, чтобы исправить меня, чтобы не понять неправильно.Если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение, и я постараюсь ответить!