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

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

На этой странице собраны упражнения для отработки свойства CSS `flex-basis`. Это свойство определяет исходный (базовый) размер flex-элемента вдоль главной оси перед тем, как свободное пространство будет распределено согласно другим flex-факторам (таким как `flex-grow` и `flex-shrink`). Задания помогут вам понять, как использовать `flex-basis` с различными значениями (`auto`, `content`, абсолютные и относительные единицы, 0) для управления размерами элементов во flex-контейнере. Вы будете заполнять пропуски в CSS-коде, чтобы достичь нужного визуального результата.

Список тем

Установка базового размера

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

CSS

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

.item {
  background-color: #87CEEB;
  border: 1px solid #4682B4;
  text-align: center;
  padding: 10px;
  /* Задайте базовый размер в 100px */
  input1: 100px;
}

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

.item {
  background-color: #87CEEB;
  border: 1px solid #4682B4;
  text-align: center;
  padding: 10px;
  /* Задайте базовый размер в 100px */
  input1: 100px;
}

HTML

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

Чтобы установить базовый размер flex-элемента, используется свойство `flex-basis`. Добавьте `flex-basis: 100px;` к селектору `.item`.

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

Результат

Сообщения

Выполнить

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

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

Использование значения auto

Сделайте так, чтобы базовый размер flex-элементов определялся их содержимым или явно заданной шириной/высотой. Используйте соответствующее ключевое слово для свойства `flex-basis`.

CSS

.container {
  display: flex;
  width: 350px;
  height: 150px;
  border: 1px solid #ccc;
  align-items: flex-start; /* Для наглядности */
}

.item {
  background-color: #90EE90;
  border: 1px solid #3CB371;
  text-align: center;
  padding: 10px;
  width: 80px; /* Явно заданная ширина */
  flex-basis: input1;
}

.item:nth-child(2) {
  width: 120px; /* Другая ширина */
}

                     .container {
  display: flex;
  width: 350px;
  height: 150px;
  border: 1px solid #ccc;
  align-items: flex-start; /* Для наглядности */
}

.item {
  background-color: #90EE90;
  border: 1px solid #3CB371;
  text-align: center;
  padding: 10px;
  width: 80px; /* Явно заданная ширина */
  flex-basis: input1;
}

.item:nth-child(2) {
  width: 120px; /* Другая ширина */
}

HTML

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

Значение `auto` для свойства `flex-basis` указывает браузеру использовать размер, заданный свойством `width` или `height` элемента (если они установлены), или размер его содержимого. Замените пропуск на `auto`.

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

Результат

Сообщения

Выполнить

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

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

Использование значения content

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

CSS

.container {
  display: flex;
  width: 350px;
  height: 150px;
  border: 1px solid #ccc;
  align-items: flex-start; /* Для наглядности */
}

.item {
  background-color: #FFB6C1;
  border: 1px solid #FF69B4;
  text-align: center;
  padding: 5px;
  width: 200px; /* Это свойство будет проигнорировано */
  flex-basis: input1;
}

                     .container {
  display: flex;
  width: 350px;
  height: 150px;
  border: 1px solid #ccc;
  align-items: flex-start; /* Для наглядности */
}

.item {
  background-color: #FFB6C1;
  border: 1px solid #FF69B4;
  text-align: center;
  padding: 5px;
  width: 200px; /* Это свойство будет проигнорировано */
  flex-basis: input1;
}

HTML

<div class="container">
  <div class="item">Короткий</div>
  <div class="item">Средний текст</div>
  <div class="item">Очень длинный текст элемента</div>
</div>

Ключевое слово `content` для `flex-basis` заставляет элемент использовать свой внутренний (intrinsic) размер. Это полезно, когда вы хотите, чтобы размер элемента определялся исключительно его содержимым. Замените пропуск на `content`.

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

Результат

Сообщения

Выполнить

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

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

Базовый размер в процентах

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

CSS

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

.item {
  background-color: #FFA07A;
  border: 1px solid #FF7F50;
  text-align: center;
  padding: 10px;
  flex-grow: 0; /* Отключаем рост, чтобы видеть чистый flex-basis */
  flex-shrink: 0; /* Отключаем сжатие */
}

.item-1 {
  flex-basis: 80px;
}

.item-2 {
  background-color: #FA8072;
  /* Установите базовый размер 50% */
  input1: 50%;
}

.item-3 {
  flex-basis: 80px;
}

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

.item {
  background-color: #FFA07A;
  border: 1px solid #FF7F50;
  text-align: center;
  padding: 10px;
  flex-grow: 0; /* Отключаем рост, чтобы видеть чистый flex-basis */
  flex-shrink: 0; /* Отключаем сжатие */
}

.item-1 {
  flex-basis: 80px;
}

.item-2 {
  background-color: #FA8072;
  /* Установите базовый размер 50% */
  input1: 50%;
}

.item-3 {
  flex-basis: 80px;
}

HTML

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2 (50%)</div>
  <div class="item item-3">Item 3</div>
</div>

Свойство `flex-basis` принимает процентные значения, которые рассчитываются относительно размера flex-контейнера. Для второго элемента (`.item-2`) установите `flex-basis: 50%;`.

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

Результат

Сообщения

Выполнить

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

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

Нулевой базовый размер для равного распределения

Сделайте так, чтобы все flex-элементы имели одинаковую ширину, независимо от их содержимого. Для этого установите их базовый размер в ноль и разрешите им расти.

CSS

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

.item {
  background-color: #ADD8E6;
  border: 1px solid #87CEEB;
  text-align: center;
  padding: 10px;
  flex-grow: 1; /* Разрешаем элементам расти */
  /* Установите базовый размер в 0 */
  input1: input2;
}

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

.item {
  background-color: #ADD8E6;
  border: 1px solid #87CEEB;
  text-align: center;
  padding: 10px;
  flex-grow: 1; /* Разрешаем элементам расти */
  /* Установите базовый размер в 0 */
  input1: input2;
}

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">Item 2</div>
  <div class="item">Элемент 3</div>
</div>

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

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

Результат

Сообщения

Выполнить

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

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

Разные значения flex-basis для элементов

Задайте разные стратегии определения базового размера для трех элементов: первый должен использовать размер контента (`content`), второй - явно заданную ширину (`auto`), а третий - фиксированный базовый размер (100px).

CSS

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

.item {
  border: 1px solid #666;
  padding: 10px;
  text-align: center;
  flex-grow: 0;
  flex-shrink: 0;
}

.item-1 {
  background-color: #f0e68c;
  /* Базовый размер по контенту */
  flex-basis: input1;
}

.item-2 {
  background-color: #e6e6fa;
  width: 120px; /* Явная ширина */
  /* Базовый размер по width или контенту */
  flex-basis: input2;
}

.item-3 {
  background-color: #d8bfd8;
  /* Фиксированный базовый размер 100px */
  input3: 100px;
}

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

.item {
  border: 1px solid #666;
  padding: 10px;
  text-align: center;
  flex-grow: 0;
  flex-shrink: 0;
}

.item-1 {
  background-color: #f0e68c;
  /* Базовый размер по контенту */
  flex-basis: input1;
}

.item-2 {
  background-color: #e6e6fa;
  width: 120px; /* Явная ширина */
  /* Базовый размер по width или контенту */
  flex-basis: input2;
}

.item-3 {
  background-color: #d8bfd8;
  /* Фиксированный базовый размер 100px */
  input3: 100px;
}

HTML

<div class="container">
  <div class="item item-1">Контент</div>
  <div class="item item-2">Ширина 120px</div>
  <div class="item item-3">Фикс 100px</div>
</div>

Используйте свойство `flex-basis` для каждого элемента с соответствующим значением: `content` для первого, `auto` для второго и `100px` для третьего.

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

Результат

Сообщения

Выполнить

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

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

Flex-basis с изображением

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

CSS

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

.item {
  border: 1px solid #999;
  padding: 5px;
  margin: 5px;
}

.img-item {
  background-color: #f5f5f5;
  /* Базовый размер по содержимому (картинке) */
  flex-basis: input1;
}

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

.text-item {
  background-color: #e0ffff;
  width: 150px; /* Задаем ширину для демонстрации auto */
  /* Базовый размер auto */
  flex-basis: input2;
}

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

.item {
  border: 1px solid #999;
  padding: 5px;
  margin: 5px;
}

.img-item {
  background-color: #f5f5f5;
  /* Базовый размер по содержимому (картинке) */
  flex-basis: input1;
}

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

.text-item {
  background-color: #e0ffff;
  width: 150px; /* Задаем ширину для демонстрации auto */
  /* Базовый размер auto */
  flex-basis: input2;
}

HTML

<div class="container">
  <div class="item img-item">
    <img src="https://naytikurs.ru/img/7.png" alt="Image">
  </div>
  <div class="item text-item">
    Текст рядом с картинкой. Его ширина задана через width, но flex-basis: auto ее учтет.
  </div>
</div>

Для элемента с изображением (`.img-item`) используйте `flex-basis: content;`, чтобы его размер определялся размером картинки. Для текстового элемента (`.text-item`) используйте `flex-basis: auto;`.

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

Результат

Сообщения

Выполнить

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

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