Сокращенное свойство flex: Тренажер CSS

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

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

Список тем

Растягивание одного элемента

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

CSS

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

.item {
  width: 50px; /* Базовая ширина для наглядности */
  height: 50px;
  background-color: #4CAF50;
  border: 1px solid #fff;
  color: white;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  background-color: #f44336;
  /* Заставьте этот элемент растянуться */
  input1: input2;
}

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

.item {
  width: 50px; /* Базовая ширина для наглядности */
  height: 50px;
  background-color: #4CAF50;
  border: 1px solid #fff;
  color: white;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  background-color: #f44336;
  /* Заставьте этот элемент растянуться */
  input1: input2;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

Задание базового размера

Используйте сокращенное свойство `flex`, чтобы установить базовую ширину второго элемента (.item-2) равной 150px. Элемент не должен растягиваться или сжиматься.

CSS

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

.item {
  height: 50px;
  background-color: #4CAF50;
  border: 1px solid #fff;
  color: white;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  flex: 1; /* Занимает оставшееся место */
  background-color: #f44336;
}

.item-2 {
  background-color: #2196F3;
  /* Установите базовую ширину 150px, без растягивания/сжатия */
  input1: input2 input3 input4;
}

.item-3 {
  flex: 1; /* Занимает оставшееся место */
}

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

.item {
  height: 50px;
  background-color: #4CAF50;
  border: 1px solid #fff;
  color: white;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  flex: 1; /* Занимает оставшееся место */
  background-color: #f44336;
}

.item-2 {
  background-color: #2196F3;
  /* Установите базовую ширину 150px, без растягивания/сжатия */
  input1: input2 input3 input4;
}

.item-3 {
  flex: 1; /* Занимает оставшееся место */
}

HTML

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

Сокращенное свойство `flex` позволяет установить `flex-basis`, указав его третьим значением (например, `flex: 0 0 150px`) или единственным значением, если это длина или процент (например, `flex: 150px`). Чтобы элемент не растягивался и не сжимался, установите `flex-grow` и `flex-shrink` в 0.

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

Результат

Сообщения

Выполнить

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

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

Использование flex: auto

Примените к элементу с классом `.item-auto` сокращенное значение `flex`, которое эквивалентно `flex: 1 1 auto`. Это позволит элементу растягиваться и сжиматься, а его базовый размер будет определяться его содержимым или свойствами `width`/`height`.

CSS

.container {
  display: flex;
  width: 100%;
  height: 150px;
  border: 1px solid #ccc;
  align-items: flex-start;
}

.item {
  height: 50px;
  border: 1px solid #fff;
  color: white;
  text-align: center;
  line-height: 50px;
}

.item-fixed {
  background-color: #9C27B0;
  width: 60px; /* Фиксированная ширина */
}

.item-auto {
  background-color: #FF9800;
  width: 80px; /* Начальная ширина */
  /* Примените flex: auto */
  input1: input2;
}

                     .container {
  display: flex;
  width: 100%;
  height: 150px;
  border: 1px solid #ccc;
  align-items: flex-start;
}

.item {
  height: 50px;
  border: 1px solid #fff;
  color: white;
  text-align: center;
  line-height: 50px;
}

.item-fixed {
  background-color: #9C27B0;
  width: 60px; /* Фиксированная ширина */
}

.item-auto {
  background-color: #FF9800;
  width: 80px; /* Начальная ширина */
  /* Примените flex: auto */
  input1: input2;
}

HTML

<div class="container">
  <div class="item item-fixed">Fixed</div>
  <div class="item item-auto">Auto Item</div>
  <div class="item item-fixed">Fixed</div>
</div>

Ключевое слово `auto` в сокращенной записи `flex` соответствует значениям `1 1 auto`. Это значит, что элемент может расти (`flex-grow: 1`), может сжиматься (`flex-shrink: 1`), а его базовый размер (`flex-basis`) определяется автоматически (как правило, по содержимому или заданным `width`/`height`).

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

Результат

Сообщения

Выполнить

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

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

Использование flex: none

Запретите элементу с классом `.item-rigid` растягиваться и сжиматься, используя сокращенное значение `flex: none`. Его размер должен остаться таким, как определено свойством `width`.

CSS

.container {
  display: flex;
  width: 100%; /* Ширина меньше суммы ширин элементов для проверки сжатия */
  height: 100px;
  border: 1px solid #ccc;
}

.item {
  height: 50px;
  border: 1px solid #fff;
  color: white;
  text-align: center;
  line-height: 50px;
}

.item-flexible {
  background-color: #00BCD4;
  flex: 1; /* Этот элемент будет сжиматься/растягиваться */
  min-width: 30px; /* Минимальная ширина при сжатии */
}

.item-rigid {
  background-color: #8BC34A;
  width: 150px; /* Начальная ширина */
  /* Запретите растягивание и сжатие */
  input1: input2;
}

                     .container {
  display: flex;
  width: 100%; /* Ширина меньше суммы ширин элементов для проверки сжатия */
  height: 100px;
  border: 1px solid #ccc;
}

.item {
  height: 50px;
  border: 1px solid #fff;
  color: white;
  text-align: center;
  line-height: 50px;
}

.item-flexible {
  background-color: #00BCD4;
  flex: 1; /* Этот элемент будет сжиматься/растягиваться */
  min-width: 30px; /* Минимальная ширина при сжатии */
}

.item-rigid {
  background-color: #8BC34A;
  width: 150px; /* Начальная ширина */
  /* Запретите растягивание и сжатие */
  input1: input2;
}

HTML

<div class="container">
  <div class="item item-flexible">Flexible</div>
  <div class="item item-rigid">Rigid (150px)</div>
  <div class="item item-flexible">Flexible</div>
</div>

Ключевое слово `none` в сокращенной записи `flex` соответствует значениям `0 0 auto`. Это значит, что элемент не может расти (`flex-grow: 0`), не может сжиматься (`flex-shrink: 0`), а его базовый размер (`flex-basis`) определяется автоматически.

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

Результат

Сообщения

Выполнить

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

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

Комбинация grow, shrink и basis

Настройте поведение элемента `.item-special` с помощью `flex`. Установите ему базовую ширину 100px, разрешите растягиваться с коэффициентом 2 и сжиматься с коэффициентом 1.

CSS

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

.item {
  height: 50px;
  border: 1px solid #fff;
  color: white;
  text-align: center;
  line-height: 50px;
}

.item-normal {
  background-color: #607D8B;
  flex: 1 1 50px; /* Растягивается/сжимается с коэфф. 1, база 50px */
}

.item-special {
  background-color: #FF5722;
  /* Установите grow=2, shrink=1, basis=100px */
  input1: input2 input3 input4;
}

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

.item {
  height: 50px;
  border: 1px solid #fff;
  color: white;
  text-align: center;
  line-height: 50px;
}

.item-normal {
  background-color: #607D8B;
  flex: 1 1 50px; /* Растягивается/сжимается с коэфф. 1, база 50px */
}

.item-special {
  background-color: #FF5722;
  /* Установите grow=2, shrink=1, basis=100px */
  input1: input2 input3 input4;
}

HTML

<div class="container">
  <div class="item item-normal">1</div>
  <div class="item item-special">Special</div>
  <div class="item item-normal">3</div>
</div>

Сокращенное свойство `flex` принимает три значения: `flex-grow`, `flex-shrink`, `flex-basis`. В данном случае вам нужно установить `flex: 2 1 100px;`.

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

Результат

Сообщения

Выполнить

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

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

Пропорциональное растягивание

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

CSS

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

.item {
  height: 50px;
  border: 1px solid #fff;
  color: white;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  background-color: #f44336;
  /* Растягивание с коэфф. 1 */
  input1: input2;
}

.item-2 {
  background-color: #2196F3;
  /* Растягивание с коэфф. 2 */
  input3: input4;
}

.item-3 {
  background-color: #4CAF50;
  /* Растягивание с коэфф. 1 */
  input5: input6;
}

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

.item {
  height: 50px;
  border: 1px solid #fff;
  color: white;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  background-color: #f44336;
  /* Растягивание с коэфф. 1 */
  input1: input2;
}

.item-2 {
  background-color: #2196F3;
  /* Растягивание с коэфф. 2 */
  input3: input4;
}

.item-3 {
  background-color: #4CAF50;
  /* Растягивание с коэфф. 1 */
  input5: input6;
}

HTML

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

Когда для `flex` указано одно числовое значение, оно используется как `flex-grow`. Чтобы один элемент растягивался вдвое больше других, задайте ему значение `flex-grow` в два раза больше, чем у остальных (например, `flex: 2;` для среднего и `flex: 1;` для крайних).

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

Результат

Сообщения

Выполнить

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

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

Разная степень сжатия

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

CSS

.container {
  display: flex;
  width: 350px; /* Ширина меньше суммы баз (150*3=450) для сжатия */
  height: 100px;
  border: 1px solid #ccc;
}

.item {
  height: 50px;
  border: 1px solid #fff;
  color: white;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  background-color: #f44336;
  /* База 150px, сжатие 2 */
  input1: 0 input2 150px;
}

.item-2 {
  background-color: #2196F3;
  /* База 150px, сжатие 1 */
  input3: 0 input4 150px;
}

.item-3 {
  background-color: #4CAF50;
  /* База 150px, сжатие 2 */
  input5: 0 input6 150px;
}

                     .container {
  display: flex;
  width: 350px; /* Ширина меньше суммы баз (150*3=450) для сжатия */
  height: 100px;
  border: 1px solid #ccc;
}

.item {
  height: 50px;
  border: 1px solid #fff;
  color: white;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  background-color: #f44336;
  /* База 150px, сжатие 2 */
  input1: 0 input2 150px;
}

.item-2 {
  background-color: #2196F3;
  /* База 150px, сжатие 1 */
  input3: 0 input4 150px;
}

.item-3 {
  background-color: #4CAF50;
  /* База 150px, сжатие 2 */
  input5: 0 input6 150px;
}

HTML

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

Свойство `flex-shrink` (второе значение в `flex`) определяет, насколько сильно элемент будет сжиматься. Меньшее значение `flex-shrink` означает меньшую степень сжатия. Установите `flex-basis` в 150px для всех. Для `.item-1` и `.item-3` установите `flex-shrink` равным 2 (или другому значению > 1), а для `.item-2` установите `flex-shrink` равным 1. `flex-grow` можно оставить 0.

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

Результат

Сообщения

Выполнить

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

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