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

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

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

Список тем

Основы flex-grow: Заполнение пространства

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

CSS

.container {
  display: flex;
  width: 100%;
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.item {
  width: 50px; /* Начальная ширина */
  height: 80px;
  margin: 10px 5px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 80px;
}

.item1 {
  background-color: #e74c3c;
}

.item2 {
  background-color: #f1c40f;
}

.item3 {
  background-color: #2ecc71;
  input1: input2;
}

                     .container {
  display: flex;
  width: 100%;
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.item {
  width: 50px; /* Начальная ширина */
  height: 80px;
  margin: 10px 5px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 80px;
}

.item1 {
  background-color: #e74c3c;
}

.item2 {
  background-color: #f1c40f;
}

.item3 {
  background-color: #2ecc71;
  input1: input2;
}

HTML

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

Чтобы элемент мог растягиваться и занимать свободное пространство во flex-контейнере, используйте свойство `flex-grow`. Значение больше нуля разрешает элементу увеличиваться. Значение `1` означает, что элемент заберет всю доступную долю свободного пространства (если другие элементы не могут расти). Примените это свойство к селектору `.item3`.

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

Результат

Сообщения

Выполнить

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

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

Равное распределение пространства

Используя свойство `flex-grow`, сделайте так, чтобы все три элемента в контейнере растягивались одинаково и вместе занимали всю ширину контейнера, распределяя свободное пространство поровну.

CSS

.container {
  display: flex;
  width: 100%;
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.item {
  /* Начальная ширина не задана, она будет auto */
  height: 80px;
  margin: 10px 5px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 80px;
  input1: input2; /* Применить ко всем .item */
}

.item1 {
  background-color: #e74c3c;
}

.item2 {
  background-color: #f1c40f;
}

.item3 {
  background-color: #2ecc71;
}

                     .container {
  display: flex;
  width: 100%;
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.item {
  /* Начальная ширина не задана, она будет auto */
  height: 80px;
  margin: 10px 5px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 80px;
  input1: input2; /* Применить ко всем .item */
}

.item1 {
  background-color: #e74c3c;
}

.item2 {
  background-color: #f1c40f;
}

.item3 {
  background-color: #2ecc71;
}

HTML

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

Чтобы несколько flex-элементов росли и делили свободное пространство поровну, им всем нужно задать одинаковое положительное значение `flex-grow`. Обычно для этого используется значение `1`. Примените это свойство ко всем элементам с классом `.item`.

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

Результат

Сообщения

Выполнить

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

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

Пропорциональный рост

Заставьте элементы расти пропорционально. Пусть второй элемент (`item2`) занимает в два раза больше свободного пространства, чем первый (`item1`). Третий элемент (`item3`) не должен изменять свою ширину.

CSS

.container {
  display: flex;
  width: 100%;
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.item {
  width: 40px;
  height: 80px;
  margin: 10px 5px;
  color: white;
  text-align: center;
  line-height: 80px;
}

.item1 {
  background-color: #e74c3c;
  input1: 1;
}

.item2 {
  background-color: #f1c40f;
  input2: input3;
}

.item3 {
  background-color: #2ecc71;
  /* По умолчанию flex-grow: 0, но можно указать явно */
  /* flex-grow: 0; */
}

                     .container {
  display: flex;
  width: 100%;
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.item {
  width: 40px;
  height: 80px;
  margin: 10px 5px;
  color: white;
  text-align: center;
  line-height: 80px;
}

.item1 {
  background-color: #e74c3c;
  input1: 1;
}

.item2 {
  background-color: #f1c40f;
  input2: input3;
}

.item3 {
  background-color: #2ecc71;
  /* По умолчанию flex-grow: 0, но можно указать явно */
  /* flex-grow: 0; */
}

HTML

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

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

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

Результат

Сообщения

Выполнить

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

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

Запрет на растягивание

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

CSS

.container {
  display: flex;
  width: 350px; /* Ширина контейнера больше суммы ширин элементов */
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.item {
  width: 80px; /* Базовая ширина */
  height: 80px;
  margin: 10px 5px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 80px;
  input1: input2;
}

.item1 {
  background-color: #e74c3c;
}

.item2 {
  background-color: #f1c40f;
}

.item3 {
  background-color: #2ecc71;
}

                     .container {
  display: flex;
  width: 350px; /* Ширина контейнера больше суммы ширин элементов */
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.item {
  width: 80px; /* Базовая ширина */
  height: 80px;
  margin: 10px 5px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 80px;
  input1: input2;
}

.item1 {
  background-color: #e74c3c;
}

.item2 {
  background-color: #f1c40f;
}

.item3 {
  background-color: #2ecc71;
}

HTML

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

По умолчанию значение `flex-grow` для flex-элементов равно `0`. Это означает, что они не будут растягиваться, чтобы занять свободное пространство в контейнере. Вам нужно явно указать это значение для всех элементов с классом `.item`.

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

Результат

Сообщения

Выполнить

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

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

Использование shorthand свойства flex

Используйте shorthand свойство `flex`, чтобы задать коэффициенты роста для элементов. Первый элемент должен иметь коэффициент роста `1`, а второй - `3`. Третий элемент не должен расти. Остальные компоненты `flex` (shrink и basis) оставьте значениями по умолчанию (`1` и `auto`).

CSS

.container {
  display: flex;
  width: 100%;
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.item {
  /* Начальная ширина не задана */
  height: 80px;
  margin: 10px 5px;
  color: white;
  text-align: center;
  line-height: 80px;
}

.item1 {
  background-color: #e74c3c;
  input1: 1;
}

.item2 {
  background-color: #f1c40f;
  input1: input2;
}

.item3 {
  background-color: #2ecc71;
  input1: 0;
}

                     .container {
  display: flex;
  width: 100%;
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.item {
  /* Начальная ширина не задана */
  height: 80px;
  margin: 10px 5px;
  color: white;
  text-align: center;
  line-height: 80px;
}

.item1 {
  background-color: #e74c3c;
  input1: 1;
}

.item2 {
  background-color: #f1c40f;
  input1: input2;
}

.item3 {
  background-color: #2ecc71;
  input1: 0;
}

HTML

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

Свойство `flex` является сокращением для `flex-grow`, `flex-shrink` и `flex-basis`. Если указать только одно числовое значение, оно будет применено к `flex-grow`, а `flex-shrink` станет `1`, `flex-basis` станет `0%`. Чтобы установить только `flex-grow`, сохраняя `flex-shrink: 1` и `flex-basis: auto`, можно использовать запись `flex: <grow-value> 1 auto;` или просто `flex: <grow-value>;` (но будьте внимательны к изменению `flex-basis` на `0%` в последнем случае). В этом задании проще всего использовать `flex: <grow-value>;`.

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

Результат

Сообщения

Выполнить

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

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

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

В контейнере два элемента с разной базовой шириной (`flex-basis`). Сделайте так, чтобы оба элемента растягивались, деля оставшееся свободное пространство поровну. Используйте свойство `flex-grow`.

CSS

.container {
  display: flex;
  width: 100%; /* Например, 370px */
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.item {
  height: 80px;
  margin: 10px 5px;
  color: white;
  text-align: center;
  line-height: 80px;
  input1: input2; /* Применить к обоим */
}

.item1 {
  background-color: #9b59b6; /* Фиолетовый */
  flex-basis: 80px;
}

.item2 {
  background-color: #34495e; /* Темно-синий */
  flex-basis: 120px;
}

                     .container {
  display: flex;
  width: 100%; /* Например, 370px */
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.item {
  height: 80px;
  margin: 10px 5px;
  color: white;
  text-align: center;
  line-height: 80px;
  input1: input2; /* Применить к обоим */
}

.item1 {
  background-color: #9b59b6; /* Фиолетовый */
  flex-basis: 80px;
}

.item2 {
  background-color: #34495e; /* Темно-синий */
  flex-basis: 120px;
}

HTML

<div class="container">
  <div class="item item1">Item 1 (80px)</div>
  <div class="item item2">Item 2 (120px)</div>
</div>

`flex-grow` распределяет только свободное пространство в контейнере, то есть то, что осталось после размещения элементов с их базовыми размерами (`flex-basis` или `width`). Чтобы элементы делили это оставшееся пространство поровну, задайте им одинаковое положительное значение `flex-grow`, например, `1`.

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

Результат

Сообщения

Выполнить

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

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