Флексбокс, часть 2 / Коэффициент сжатия элементов, flex-shrink [10/28]
×

Коэффициент сжатия элементов, flex-shrink [10/28]

Если сумма базовых размеров флекс-элементов больше, чем размер флекс-контейнера, то возникает отрицательное пространство.

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

За уменьшение флекс-элементов отвечает свойство flex-shrink, которое можно назвать «коэффициентом сжатия».

Свойство flex-shrink принимает неотрицательные числовые значения, его значение по умолчанию — 1.

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

Если значение flex-shrink равно нулю, то флекс-элемент уменьшаться не будет.

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


Выполнить задание
<!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"> <div class="spot spot-small spot-1"> <div class="skate racoon-green"></div> <div class="skate racoon-brown"></div> </div> <div class="spot spot-small spot-2"> <div class="skate racoon-gray"></div> <div class="skate racoon-orange"></div> <!-- Голубой Енот <div class="skate racoon-blue"></div> --> </div> </body> </html>
.spot { display: flex; width: 450px; } .spot-1 .skate { flex-basis: 150px; } .spot-1 .racoon-brown { } .spot-2 .skate { flex-basis: 150px; }
HTML Academy
  1. Скейтбордам на первой поляне .spot-1 .skate задайте базовый размер флекс-элементов 300px.
  2. На вторую поляну добавьте скейт с Голубым Енотом.
  3. Затем задайте нулевой коэффициент сжатия скейту Коричневого Енота .racoon-brown
  4. и всем скейтам на второй поляне.
Теория Проверить Следующее задание
Идёт запись на курс Базовый JavaScript #10, который стартует 8 августа.

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

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

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

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