Свойство flex-shrink: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Эта серия заданий посвящена свойству CSS `flex-shrink`. Вы попрактикуетесь в управлении тем, как flex-элементы сжимаются, когда в контейнере недостаточно места для их размещения в соответствии с их базовым размером. Задания построены от простого к сложному: начиная с основ предотвращения сжатия и заканчивая настройкой относительной степени сжатия для разных элементов во flex-контейнере. Вам нужно будет заполнять пропуски в CSS коде, чтобы достичь требуемого визуального результата.

Список тем

Запрет сжатия элемента

В контейнере недостаточно места для всех элементов. Сделайте так, чтобы первый элемент ('item-1') не сжимался и сохранял свою исходную ширину (150px), даже если это приведет к вытеснению других элементов.

CSS

.container {
  display: flex;
  width: 300px; /* Меньше суммарной ширины элементов */
  border: 1px solid #ccc;
}

.item {
  width: 150px;
  height: 50px;
  border: 1px solid black;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  background-color: #ffcccc;
  input1: input2;
}

.item-2 {
  background-color: #ccffcc;
}

.item-3 {
  background-color: #ccccff;
}

                     .container {
  display: flex;
  width: 300px; /* Меньше суммарной ширины элементов */
  border: 1px solid #ccc;
}

.item {
  width: 150px;
  height: 50px;
  border: 1px solid black;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  background-color: #ffcccc;
  input1: input2;
}

.item-2 {
  background-color: #ccffcc;
}

.item-3 {
  background-color: #ccccff;
}

HTML

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

Чтобы элемент не сжимался при нехватке места во flex-контейнере, используйте свойство `flex-shrink` со значением `0`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сжатие по умолчанию

Сейчас все элементы имеют одинаковую ширину и сжимаются равномерно, так как контейнер уже их суммарной ширины. Убедитесь, что второй элемент ('item-2') использует поведение сжатия по умолчанию. Заполните пропуск соответствующим свойством и значением.

CSS

.container {
  display: flex;
  width: 250px; /* Меньше суммарной ширины */
  border: 1px solid #ccc;
}

.item {
  width: 100px;
  height: 50px;
  border: 1px solid black;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  background-color: #ffcccc;
}

.item-2 {
  background-color: #ccffcc;
  input1: input2; /* Поведение по умолчанию */
}

.item-3 {
  background-color: #ccccff;
}

                     .container {
  display: flex;
  width: 250px; /* Меньше суммарной ширины */
  border: 1px solid #ccc;
}

.item {
  width: 100px;
  height: 50px;
  border: 1px solid black;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  background-color: #ffcccc;
}

.item-2 {
  background-color: #ccffcc;
  input1: input2; /* Поведение по умолчанию */
}

.item-3 {
  background-color: #ccccff;
}

HTML

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

По умолчанию flex-элементы имеют `flex-shrink: 1`. Это означает, что они могут сжиматься, если в контейнере не хватает места. Укажите это свойство и значение явно для элемента 'item-2'.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Увеличение коэффициента сжатия

Сделайте так, чтобы третий элемент ('item-3') сжимался сильнее, чем остальные два элемента, когда в контейнере не хватает места. Остальные элементы должны иметь коэффициент сжатия по умолчанию.

CSS

.container {
  display: flex;
  width: 320px; /* Меньше суммарной ширины */
  border: 1px solid #ccc;
}

.item {
  width: 150px;
  height: 50px;
  border: 1px solid black;
  text-align: center;
  line-height: 50px;
  /* flex-shrink: 1; по умолчанию для всех */
}

.item-1 {
  background-color: #ffcccc;
}

.item-2 {
  background-color: #ccffcc;
}

.item-3 {
  background-color: #ccccff;
  input1: 2; /* Увеличиваем сжатие */
}

                     .container {
  display: flex;
  width: 320px; /* Меньше суммарной ширины */
  border: 1px solid #ccc;
}

.item {
  width: 150px;
  height: 50px;
  border: 1px solid black;
  text-align: center;
  line-height: 50px;
  /* flex-shrink: 1; по умолчанию для всех */
}

.item-1 {
  background-color: #ffcccc;
}

.item-2 {
  background-color: #ccffcc;
}

.item-3 {
  background-color: #ccccff;
  input1: 2; /* Увеличиваем сжатие */
}

HTML

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

Чтобы элемент сжимался интенсивнее других, ему нужно задать большее значение `flex-shrink`. Например, значение `2` заставит элемент сжаться в два раза сильнее (пропорционально его базовому размеру), чем элемент со значением `1`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Разные коэффициенты сжатия

Задайте элементам разные коэффициенты сжатия: 'item-1' не должен сжиматься, 'item-2' должен сжиматься стандартно, а 'item-3' должен сжиматься в три раза сильнее, чем 'item-2'.

CSS

.container {
  display: flex;
  width: 300px;
  border: 1px solid #ccc;
}

.item {
  width: 120px;
  height: 50px;
  border: 1px solid black;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  background-color: #ffcccc;
  flex-shrink: input1; /* Не сжимать */
}

.item-2 {
  background-color: #ccffcc;
  flex-shrink: input2; /* Стандартное сжатие */
}

.item-3 {
  background-color: #ccccff;
  flex-shrink: input3; /* Сильное сжатие */
}

                     .container {
  display: flex;
  width: 300px;
  border: 1px solid #ccc;
}

.item {
  width: 120px;
  height: 50px;
  border: 1px solid black;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  background-color: #ffcccc;
  flex-shrink: input1; /* Не сжимать */
}

.item-2 {
  background-color: #ccffcc;
  flex-shrink: input2; /* Стандартное сжатие */
}

.item-3 {
  background-color: #ccccff;
  flex-shrink: input3; /* Сильное сжатие */
}

HTML

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

Используйте свойство `flex-shrink`. Для 'item-1' установите значение `0`, чтобы запретить сжатие. Для 'item-2' можно оставить значение по умолчанию `1` (или указать его явно). Для 'item-3' установите значение `3`, чтобы он сжимался втрое интенсивнее элемента со значением `1`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сжатие элементов с разной базовой шириной

В контейнере находятся два элемента разной начальной ширины. Оба имеют `flex-shrink: 1`. Обратите внимание, как они сжимаются пропорционально своей ширине. Теперь измените CSS так, чтобы второй, более широкий элемент ('item-wide'), сжимался в два раза меньше, чем первый ('item-narrow').

CSS

.container {
  display: flex;
  width: 300px;
  border: 1px solid #ccc;
}

.item {
  height: 60px;
  border: 1px solid black;
  text-align: center;
  line-height: 60px;
}

.item-narrow {
  width: 100px;
  background-color: #e0f7fa;
  input1: input2; /* Коэффициент сжатия узкого элемента */
}

.item-wide {
  width: 250px;
  background-color: #fff9c4;
  input3: input4; /* Коэффициент сжатия широкого элемента */
}

                     .container {
  display: flex;
  width: 300px;
  border: 1px solid #ccc;
}

.item {
  height: 60px;
  border: 1px solid black;
  text-align: center;
  line-height: 60px;
}

.item-narrow {
  width: 100px;
  background-color: #e0f7fa;
  input1: input2; /* Коэффициент сжатия узкого элемента */
}

.item-wide {
  width: 250px;
  background-color: #fff9c4;
  input3: input4; /* Коэффициент сжатия широкого элемента */
}

HTML

<div class="container">
  <div class="item item-narrow">Narrow (100px)</div>
  <div class="item item-wide">Wide (250px)</div>
</div>

Сжатие распределяется пропорционально произведению `flex-shrink` на `flex-basis` (или `width`). Чтобы широкий элемент сжимался относительно меньше, ему нужно задать меньшее значение `flex-shrink` по сравнению с узким элементом. Если узкий элемент имеет `flex-shrink: 1`, а широкий должен сжиматься вдвое меньше, попробуйте установить для широкого `flex-shrink: 0.5`. Или, чтобы использовать целые числа, установите узкому `flex-shrink: 2`, а широкому `flex-shrink: 1`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Использование flex-shrink с изображениями

В контейнере расположены три изображения. Их суммарная ширина больше ширины контейнера. Сделайте так, чтобы первое изображение не сжималось, второе сжималось стандартно, а третье сжималось в два раза сильнее второго.

CSS

.flex-container {
  display: flex;
  width: 350px;
  border: 1px solid grey;
  align-items: flex-start; /* Выравнивание по верху */
}

.img-container {
  border: 1px solid blue;
  /* Базовый размер определяется содержимым (img) */
}

.img-container img {
  display: block; /* Убирает лишний отступ под картинкой */
  width: 150px;
  height: auto;
}

.img-container-1 {
  input1: input2;
}

.img-container-2 {
  input3: input4;
}

.img-container-3 {
  input5: input6;
}

                     .flex-container {
  display: flex;
  width: 350px;
  border: 1px solid grey;
  align-items: flex-start; /* Выравнивание по верху */
}

.img-container {
  border: 1px solid blue;
  /* Базовый размер определяется содержимым (img) */
}

.img-container img {
  display: block; /* Убирает лишний отступ под картинкой */
  width: 150px;
  height: auto;
}

.img-container-1 {
  input1: input2;
}

.img-container-2 {
  input3: input4;
}

.img-container-3 {
  input5: input6;
}

HTML

<div class="flex-container">
  <div class="img-container img-container-1">
    <img src="https://naytikurs.ru/img/1.png" alt="Image 1">
  </div>
  <div class="img-container img-container-2">
    <img src="https://naytikurs.ru/img/2.png" alt="Image 2">
  </div>
  <div class="img-container img-container-3">
    <img src="https://naytikurs.ru/img/4.png" alt="Image 3">
  </div>
</div>

Примените свойство `flex-shrink` к элементам-оберткам изображений (`div.img-container`). Используйте `flex-shrink: 0` для первого, `flex-shrink: 1` для второго и `flex-shrink: 2` для третьего.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Только один элемент сжимается

В контейнере три элемента. Сделайте так, чтобы только средний элемент ('item-2') мог сжиматься, если это необходимо, а остальные два элемента сохраняли свою исходную ширину.

CSS

.container {
  display: flex;
  width: 300px; /* Меньше суммарной ширины */
  border: 1px solid #ccc;
}

.item {
  width: 120px;
  height: 50px;
  border: 1px solid black;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  background-color: #ffcccc;
  input1: input2; /* Запретить сжатие */
}

.item-2 {
  background-color: #ccffcc;
  /* По умолчанию flex-shrink: 1, можно не указывать или указать явно */
  /* flex-shrink: 1; */
}

.item-3 {
  background-color: #ccccff;
  input3: input4; /* Запретить сжатие */
}

                     .container {
  display: flex;
  width: 300px; /* Меньше суммарной ширины */
  border: 1px solid #ccc;
}

.item {
  width: 120px;
  height: 50px;
  border: 1px solid black;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  background-color: #ffcccc;
  input1: input2; /* Запретить сжатие */
}

.item-2 {
  background-color: #ccffcc;
  /* По умолчанию flex-shrink: 1, можно не указывать или указать явно */
  /* flex-shrink: 1; */
}

.item-3 {
  background-color: #ccccff;
  input3: input4; /* Запретить сжатие */
}

HTML

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

Чтобы элемент мог сжиматься, его `flex-shrink` должен быть больше нуля (например, `1`). Чтобы элемент не сжимался, его `flex-shrink` должен быть равен `0`. Установите `flex-shrink: 0` для первого и третьего элементов, а для второго оставьте значение по умолчанию `1` (или укажите его явно).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку