Флексбокс, часть 2 / Расчёт итогового размера с flex-shrink [12/28]
×

Расчёт итогового размера с flex-shrink [12/28]

Ниже описан механизм расчёта размеров элементов, когда места в контейнере не хватает:

1 шаг. Рассчитываем отрицательное пространство (ОП) во флекс-контейнере:

ОП = Ширина контейнера - Сумма базовых размеров элементов

2 шаг. Находим сумму произведений базовых размеров (СПБР) элементов на их коэффициенты сжатия:

СПБР = (Базовый размер1 * flex-shrink1) + (Базовый размер2 * flex-shrink2) + … + (Базовый размерn * flex-shrinkn)

3 шаг. Для каждого элемента считаем «нормированный коэффициент сжатия» (НКС), для чего произведение базового размера элемента на его коэффициент сжатия делим на СПБР:

НКС = (Базовый размер * flex-shrink) / СПБР

4 шаг. Базовый размер элемента уменьшаем на часть ОП пропорциональную НКС элемента:

Итоговый размер = Базовый размер - (НКС * ОП)

Получается, что доля отрицательного пространства, которую «впитает» элемент, зависит от двух факторов:

  • соотношения коэффициента сжатия элемента с коэффициентами других элементов,
  • соотношения базового размера элемента с базовыми размерами других элементов.

Именно поэтому в формулах присутствуют нормировки. А теперь снова попробуйте подобрать коэффициенты сжатия.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Расчёт итогового размера с flex-shrink</title> <base href="/assets/course113/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="world world-flat"> <div class="spot"> <div class="skate no-width racoon-green"></div> <div class="skate no-width racoon-brown"></div> <div class="ruler ruler-green w-50">50px</div> <div class="ruler ruler-brown w-150 l-50">150px</div> <div class="ruler ruler-negative w-200 l-200">−200px</div> </div> </body> </html>
.spot { display: flex; width: 200px; height: 200px; margin-left: 30px; padding: 10px 0; } .racoon-green { flex-basis: 100px; flex-shrink: 0; } .racoon-brown { flex-basis: 300px; flex-shrink: 0; }
HTML Academy
  1. Задайте енотам значения flex-shrink так, чтобы их ширина стала равной ширине «линеек».

В этом задании можно менять только значения flex-shrink.

Теория Проверить Следующее задание

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.