[Научите будущих бойфрендов изучать внешний интерфейс] Алгоритм сжатия flexbox (включен)

flexbox
[Научите будущих бойфрендов изучать внешний интерфейс] Алгоритм сжатия flexbox (включен)

Базовый метод 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, все оставшееся пространство не будет выделено дочерним элементам.

резюме

Мама, все наконец закончилось. Кашель кашель! Я наконец-то разобралась с алгоритмом сжатия флекса, и флекс, который я написала своему будущему парню, закончился✌ . ️Если этот документ также полезен для вас, не забудьте поставить лайк, прокомментировать и подписаться на тройной щелчок 😝

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