Флексбокс, часть 2 / Пропорциональное сжатие элементов [11/28]
×

Пропорциональное сжатие элементов [11/28]

Свойство flex-shrink очень похоже на свойство flex-grow. Оно задаёт пропорции, в которых флекс-элементы «впитывают» отрицательное пространство.

Чем больше значение коэффициента сжатия у элемента, тем больше отрицательного пространства он «впитает» и тем сильнее сожмётся.

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

А пока снова поэкспериментируйте с коэффицентами в задании-загадке.

Вам нужно подобрать такие значения flex-shrink, чтобы итоговый размер элементов оказался таким же, как у коричневой и зелёной «линеек», и чтобы над красной «линейкой» ничего не было.

На красной линейке показан размер отрицательного пространства, которое распределяется при сжатии флекс-элементов.

Базовые размеры элементов и размеры флекс-контейнера вы узнаете из кода.

Подсказка: в простейшем решении коэффициенты будут целыми числами не больше 5.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Пропорциональное сжатие элементов</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-200">200px</div> <div class="ruler ruler-brown w-100 l-200">100px</div> <div class="ruler ruler-negative w-200 l-300">−200px</div> </div> </body> </html>
.spot { display: flex; width: 300px; height: 200px; margin-left: 30px; padding: 10px 0; } .racoon-green { flex-basis: 250px; flex-shrink: 0; } .racoon-brown { flex-basis: 250px; flex-shrink: 0; }
HTML Academy
  1. Задайте енотам значения flex-shrink так, чтобы их ширина стала равной ширине «линеек».

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

Теория Проверить Следующее задание
Идёт запись на курс Продвинутый JavaScript #3, который стартует 26 сентября.

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

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

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

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