Включение Flexbox (display: flex)

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

Опубликовано 17.03.2025
Просмотры 7
Автор
Рек. время прохождения 2 минуты
Упражнений 5
Комментарии 0
Тренажер CSS

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

Список тем

Активация Flexbox

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

CSS
.container {
  border: 2px solid #6a1b9a;
  padding: 10px;
  margin-top: 10px;
  input1: input2;
}

.item {
  background-color: #e1bee7;
  padding: 15px;
  margin: 5px;
  border: 1px solid #ce93d8;
  text-align: center;
}
HTML
<div class="container">
  <div class="item">Блок 1</div>
  <div class="item">Блок 2</div>
  <div class="item">Блок 3</div>
</div>
Чтобы дочерние элементы контейнера начали подчиняться правилам Flexbox, родительскому контейнеру (в данном случае, элементу с классом `.container`) нужно задать свойство `display` со значением `flex`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Inline Flexbox

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

CSS
.inline-container {
  border: 2px solid #0277bd;
  padding: 8px;
  margin: 0 5px;
  /* Допишите свойство и значение для inline-flex */
  input1: input2;
}

.inline-item {
  background-color: #b3e5fc;
  padding: 10px;
  margin: 3px;
  border: 1px solid #81d4fa;
}
HTML
<span>Текст до контейнера...</span>
<div class="inline-container">
  <div class="inline-item">A</div>
  <div class="inline-item">B</div>
</div>
<span>Текст после контейнера.</span>
Для того чтобы контейнер одновременно был flex-контейнером для своих дочерних элементов и при этом сам вел себя как строчный элемент (inline), используйте значение `inline-flex` для свойства `display`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Flexbox для элементов списка

Стандартный HTML-список (`<ul>`) отображает свои элементы (`<li>`) вертикально, один под другим. Примените Flexbox к списку, чтобы его пункты выстроились в горизонтальный ряд.

CSS
.flex-list {
  list-style: none; /* Убираем маркеры списка */
  padding: 0;
  margin: 15px 0;
  border: 2px dashed #2e7d32;
  padding: 10px;
  /* Сделайте этот список flex-контейнером */
  input1: input2;
}

.flex-list li {
  background-color: #c8e6c9;
  padding: 12px;
  margin: 0 4px;
  border: 1px solid #a5d6a7;
}
HTML
<ul class="flex-list">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
</ul>
Чтобы повлиять на расположение элементов списка (`<li>`), нужно сделать их родительский элемент (`ul` с классом `.flex-list`) flex-контейнером. Используйте свойство `display` со значением `flex` для селектора `.flex-list`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Вложенные Flex-контейнеры

В этом примере есть внешний контейнер и несколько вложенных элементов. Один из вложенных элементов сам содержит другие элементы. Ваша задача - сделать так, чтобы и основные элементы (Item 1, Item 2, Item 3) расположились в ряд, и элементы внутри 'Item 2' (Sub A, Sub B) тоже расположились в ряд.

CSS
#outer-container {
  border: 2px solid #d84315;
  padding: 10px;
  margin-bottom: 10px;
  /* Включите Flexbox для внешнего контейнера */
  input1: input2;
}

.outer-item {
  background-color: #ffccbc;
  border: 1px solid #ffab91;
  padding: 10px;
  margin: 5px;
}

.nested-container {
  background-color: #d1c4e9; /* Другой фон для наглядности */
  border-color: #b39ddb;
  /* Включите Flexbox для вложенного контейнера */
  input3: input4;
}

.nested-container span {
  background-color: #f3e5f5;
  padding: 5px 8px;
  margin: 2px;
  border: 1px solid #e1bee7;
  display: inline-block; /* Чтобы span имели размеры */
}
HTML
<div id="outer-container">
  <div class="outer-item">Item 1</div>
  <div class="outer-item nested-container">
    <span>Sub A</span>
    <span>Sub B</span>
  </div>
  <div class="outer-item">Item 3</div>
</div>
Это требует двух шагов: 1. Примените `display: flex` к внешнему контейнеру (`#outer-container`), чтобы его прямые дочерние элементы (`.outer-item`) выстроились в ряд. 2. Примените `display: flex` к вложенному контейнеру (`.nested-container`), чтобы его дочерние элементы (`span`) также выстроились в ряд.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Расположение изображений в ряд

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

CSS
.image-gallery {
  border: 2px solid #fbc02d;
  padding: 5px;
  margin-top: 10px;
  /* Сделайте галерею flex-контейнером */
  input1: input2;
}

.image-gallery img {
  max-width: 80px; /* Ограничиваем ширину для малых экранов */
  height: auto;
  margin: 5px;
  border: 1px solid #fff9c4;
  vertical-align: top; /* Убирает возможный отступ снизу */
}
HTML
<div class="image-gallery">
  <img src="https://naytikurs.ru/img/5.png" alt="Image 5">
  <img src="https://naytikurs.ru/img/6.png" alt="Image 6">
  <img src="https://naytikurs.ru/img/7.png" alt="Image 7">
</div>
Чтобы изображения (`img`) внутри контейнера (`.image-gallery`) выстроились в ряд, необходимо сделать сам контейнер `.image-gallery` flex-контейнером. Для этого используйте свойство `display` со значением `flex`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру