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

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

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

Flexbox - мощный инструмент для создания раскладок. Иногда требуется разместить элементы внутри другого элемента, который сам является частью flex-раскладки. В таких случаях используются вложенные flex-контейнеры. Это означает, что элемент, являющийся flex-элементом (прямым потомком flex-контейнера), сам объявляется flex-контейнером (`display: flex`). Это позволяет применять все свойства flexbox к его дочерним элементам, создавая сложные и гибкие структуры. В этих заданиях вы потренируетесь делать элементы flex-контейнерами и управлять расположением их дочерних элементов, находясь при этом внутри другого flex-контейнера.

Список тем

Превращение элемента во flex-контейнер

У нас есть внешний контейнер, который уже использует flexbox для расположения своих дочерних блоков. Ваша задача - сделать так, чтобы один из этих дочерних блоков (`.nested-container`) сам стал flex-контейнером и его внутренние элементы (`.inner-item`) расположились в ряд.

CSS
.outer-container {
  display: flex;
  gap: 10px;
  background-color: #eee;
  padding: 10px;
  border-radius: 5px;
  min-height: 100px;
}

.outer-item {
  background-color: #add8e6;
  padding: 10px;
  border-radius: 3px;
}

.nested-container {
  background-color: #90ee90;
  padding: 10px;
  border-radius: 3px;
  /* --- Задание --- */
  display: input1;
  /* --------------- */
  gap: 5px;
}

.inner-item {
  background-color: #f0e68c;
  padding: 15px 5px;
  border-radius: 3px;
  text-align: center;
}
HTML
<div class="outer-container">
  <div class="outer-item">Элемент 1</div>
  <div class="nested-container">
    <div class="inner-item">A</div>
    <div class="inner-item">B</div>
    <div class="inner-item">C</div>
  </div>
  <div class="outer-item">Элемент 3</div>
</div>
Чтобы элемент стал flex-контейнером, ему нужно задать свойство `display` со значением `flex`. По умолчанию элементы внутри flex-контейнера выстраиваются в ряд.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Выравнивание во вложенном контейнере

Внешний контейнер (`.card-list`) использует flex для расположения карточек (`.card`). Внутри каждой карточки есть блок `.card-content`, который уже является flex-контейнером. Ваша задача - выровнять элементы внутри `.card-content` по центру основной оси.

CSS
.card-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
}

.card {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
}

.card-content {
  display: flex;
  gap: 10px;
  background-color: #e0f7fa;
  padding: 10px;
  border-radius: 4px;
  min-height: 50px;
  /* --- Задание --- */
  input1: input2;
  /* --------------- */
}

.card-item {
  background-color: #ffcdd2;
  padding: 10px;
  border-radius: 3px;
}
HTML
<div class="card-list">
  <div class="card">
    Карточка 1
    <div class="card-content">
      <div class="card-item">A</div>
      <div class="card-item">B</div>
    </div>
  </div>
  <div class="card">
    Карточка 2
    <div class="card-content">
      <div class="card-item">C</div>
      <div class="card-item">D</div>
      <div class="card-item">E</div>
    </div>
  </div>
</div>
Для выравнивания элементов вдоль основной оси flex-контейнера используется свойство `justify-content`. Значение `center` разместит элементы по центру.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Изменение направления во вложенном контейнере

У нас есть внешний контейнер (`.main-area`), располагающий свои дочерние элементы (`.sidebar`, `.content`) в ряд. Внутри `.content` есть блок `.item-list`, который является flex-контейнером. Задача: изменить направление основной оси для `.item-list` так, чтобы его дочерние элементы (`.list-item`) располагались друг под другом (в столбец).

CSS
.main-area {
  display: flex;
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  min-height: 250px;
}

.sidebar {
  background-color: #cceeff;
  padding: 15px;
  border-radius: 4px;
  width: 80px; /* Фиксированная ширина для примера */
}

.content {
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  flex-grow: 1; /* Занимает оставшееся место */
}

.item-list {
  display: flex;
  gap: 8px;
  background-color: #e8f5e9;
  padding: 10px;
  border-radius: 3px;
  /* --- Задание --- */
  input1: input2;
  /* --------------- */
}

.list-item {
  background-color: #ffe0b2;
  padding: 10px;
  border-radius: 3px;
}
HTML
<div class="main-area">
  <div class="sidebar">Сайдбар</div>
  <div class="content">
    Контент
    <div class="item-list">
      <div class="list-item">Элемент 1</div>
      <div class="list-item">Элемент 2</div>
      <div class="list-item">Элемент 3</div>
    </div>
  </div>
</div>
Свойство `flex-direction` управляет направлением основной оси flex-контейнера. Чтобы расположить элементы в столбец, используйте значение `column`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Растягивание элемента во вложенном контейнере

Есть карточка товара (`.product-card`), которая является flex-контейнером и располагает изображение и блок с информацией (`.info`) в ряд. Блок `.info` также является flex-контейнером, располагая заголовок, описание и кнопку в столбец. Задача: сделать так, чтобы описание (`.description`) растягивалось и занимало всё доступное вертикальное пространство внутри блока `.info`.

CSS
.product-card {
  display: flex;
  gap: 15px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  max-width: 340px; /* Ограничение для iframe */
}

.product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0; /* Запрещаем сжиматься */
}

.info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* --- Задание для .info --- */
  input1: 1; /* Растягиваем сам блок .info в .product-card */
  /* ------------------------- */
}

.title {
  font-weight: bold;
}

.description {
  background-color: #f1f8e9;
  padding: 8px;
  border-radius: 3px;
  /* --- Задание для .description --- */
  input2: 1;
  /* ------------------------------ */
}

.button {
  padding: 8px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  margin-top: auto; /* Прижимаем кнопку к низу, если описание не растянуто */
}
HTML
<div class="product-card">
  <img src="https://naytikurs.ru/img/7.png" alt="Product Image" class="product-image">
  <div class="info">
    <div class="title">Товар</div>
    <div class="description">Краткое описание товара, которое должно занимать всё доступное место по высоте.</div>
    <button class="button">Купить</button>
  </div>
</div>
Свойство `flex-grow` позволяет элементу растягиваться и занимать доступное пространство вдоль основной оси flex-контейнера. Так как `.info` имеет `flex-direction: column`, основная ось вертикальна. Примените `flex-grow: 1;` к элементу `.description`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Комбинированная вложенная раскладка

Создаем структуру поста: есть основной контейнер `.post`, внутри него `.post-header` и `.post-body`. Сам `.post` является flex-контейнером (элементы в столбец). Блок `.post-body` тоже должен стать flex-контейнером, чтобы расположить картинку (`.post-image`) и текст (`.post-text`) рядом (в строку). Выровняйте картинку и текст по вертикали (поперечная ось для `.post-body`).

CSS
.post {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fafafa;
  padding: 10px;
  max-width: 350px;
}

.post-header {
  background-color: #e3f2fd;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  font-weight: bold;
}

.post-body {
  background-color: #fff9c4;
  padding: 10px;
  border-radius: 4px;
  /* --- Задание 1 --- */
  display: input1;
  /* ----------------- */
  gap: 10px;
  /* --- Задание 2 --- */
  input2: input3;
  /* ----------------- */
}

.post-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 3px;
}

.post-text {
  background-color: #fce4ec;
  padding: 5px;
  border-radius: 3px;
}
HTML
<div class="post">
  <div class="post-header">Заголовок поста</div>
  <div class="post-body">
    <img src="https://naytikurs.ru/img/2.png" alt="Post Image" class="post-image">
    <div class="post-text">Текст поста рядом с картинкой. Нужно выровнять по вертикали.</div>
  </div>
</div>
Сделайте `.post-body` flex-контейнером с помощью `display: flex;`. Для выравнивания элементов по поперечной оси используется свойство `align-items`. Значение `center` выровняет их по центру.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Вложенный контейнер с переносом строк

У нас есть галерея (`.gallery`), которая является flex-контейнером. Внутри неё есть секция (`.image-group`) с несколькими изображениями. Сделайте так, чтобы `.image-group` стал flex-контейнером, а его дочерние изображения (`.thumbnail`) переносились на следующую строку, если не помещаются в одну. Выровняйте строки изображений по центру контейнера `.image-group`.

CSS
.gallery {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

.gallery-title {
  font-weight: bold;
  text-align: center;
}

.image-group {
  background-color: #e0e0e0;
  padding: 10px;
  border-radius: 4px;
  min-height: 150px; /* Даем высоту для демонстрации align-content */
  /* --- Задание 1: Сделать flex-контейнером --- */
  display: input1;
  /* --- Задание 2: Разрешить перенос --- */
  input2: input3;
  /* --- Задание 3: Выровнять строки по центру --- */
  input4: input5;
  /* ----------------------------------------- */
  gap: 5px;
}

.thumbnail {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 3px;
}
HTML
<div class="gallery">
  <div class="gallery-title">Группа изображений</div>
  <div class="image-group">
    <img src="https://naytikurs.ru/img/1.png" alt="Thumb 1" class="thumbnail">
    <img src="https://naytikurs.ru/img/4.png" alt="Thumb 2" class="thumbnail">
    <img src="https://naytikurs.ru/img/5.png" alt="Thumb 3" class="thumbnail">
    <img src="https://naytikurs.ru/img/6.png" alt="Thumb 4" class="thumbnail">
    <img src="https://naytikurs.ru/img/8.png" alt="Thumb 5" class="thumbnail">
     <img src="https://naytikurs.ru/img/9.png" alt="Thumb 6" class="thumbnail">
  </div>
</div>
Чтобы разрешить перенос flex-элементов на новую строку, используйте `flex-wrap: wrap;`. Для выравнивания строк (когда есть перенос) по поперечной оси используется свойство `align-content`. Значение `center` выровняет строки по центру.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру