Сложные макеты на Flexbox: Тренажер CSS

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

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

Список тем

Базовая структура: Шапка, контент, подвал

Создайте вертикальную структуру страницы, состоящую из шапки, основного контента и подвала. Контейнер уже является flex-контейнером, но элементы расположены горизонтально. Измените направление основной оси.

CSS

.page-container {
  display: flex;
  input1: column; /* Расположить элементы вертикально */
  min-height: 300px; /* Для наглядности */
  border: 1px solid #ccc;
}

.header, .footer {
  background-color: #f0f0f0;
  padding: 15px;
  text-align: center;
}

.content {
  background-color: #e9e9e9;
  padding: 20px;
  /* Это свойство будет важно в следующих заданиях */
  flex-grow: 1;
}

                     .page-container {
  display: flex;
  input1: column; /* Расположить элементы вертикально */
  min-height: 300px; /* Для наглядности */
  border: 1px solid #ccc;
}

.header, .footer {
  background-color: #f0f0f0;
  padding: 15px;
  text-align: center;
}

.content {
  background-color: #e9e9e9;
  padding: 20px;
  /* Это свойство будет важно в следующих заданиях */
  flex-grow: 1;
}

HTML

<div class="page-container">
  <header class="header">Шапка</header>
  <main class="content">Основной контент</main>
  <footer class="footer">Подвал</footer>
</div>

Чтобы расположить flex-элементы вертикально, используйте свойство `flex-direction` со значением `column` для flex-контейнера.

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

Результат

Сообщения

Выполнить

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

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

Растягивание контента

В макете 'Шапка, контент, подвал' основной блок контента должен занимать всё доступное вертикальное пространство между шапкой и подвалом. Шапка и подвал должны иметь свою естественную высоту.

CSS

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  border: 1px solid #ccc;
}

.header, .footer {
  background-color: #f0f0f0;
  padding: 15px;
  text-align: center;
  /* flex-shrink: 0; /* Можно добавить, чтобы предотвратить сжатие */
}

.content {
  background-color: #e9e9e9;
  padding: 20px;
  input1: 1; /* Растянуть этот блок */
}

                     .page-container {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  border: 1px solid #ccc;
}

.header, .footer {
  background-color: #f0f0f0;
  padding: 15px;
  text-align: center;
  /* flex-shrink: 0; /* Можно добавить, чтобы предотвратить сжатие */
}

.content {
  background-color: #e9e9e9;
  padding: 20px;
  input1: 1; /* Растянуть этот блок */
}

HTML

<div class="page-container">
  <header class="header">Шапка</header>
  <main class="content">Основной контент</main>
  <footer class="footer">Подвал</footer>
</div>

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

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

Результат

Сообщения

Выполнить

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

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

Боковая панель и контент

Создайте макет, где слева находится боковая панель фиксированной ширины (например, 80px), а справа - основной контент, занимающий всё оставшееся пространство. Элементы должны располагаться горизонтально.

CSS

.container-sidebar {
  display: input1;
  min-height: 300px;
  border: 1px solid #ccc;
}

.sidebar {
  background-color: #f0f0f0;
  padding: 15px;
  width: 80px; /* Фиксированная ширина */
  input2: 0; /* Запретить сжатие */
}

.main-content {
  background-color: #e9e9e9;
  padding: 20px;
  input3: 1; /* Разрешить растягивание */
}

                     .container-sidebar {
  display: input1;
  min-height: 300px;
  border: 1px solid #ccc;
}

.sidebar {
  background-color: #f0f0f0;
  padding: 15px;
  width: 80px; /* Фиксированная ширина */
  input2: 0; /* Запретить сжатие */
}

.main-content {
  background-color: #e9e9e9;
  padding: 20px;
  input3: 1; /* Разрешить растягивание */
}

HTML

<div class="container-sidebar">
  <aside class="sidebar">Сайдбар</aside>
  <main class="main-content">Основной контент</main>
</div>

Используйте `display: flex` для контейнера. Задайте боковой панели `flex-basis` (или `width`) и `flex-shrink: 0` (чтобы она не сжималась). Основному контенту задайте `flex-grow: 1`, чтобы он занял оставшееся место.

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

Результат

Сообщения

Выполнить

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

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

Изменение порядка элементов

В горизонтальном ряду из трех блоков поменяйте визуальный порядок так, чтобы Блок 3 стал первым, Блок 1 - вторым, а Блок 2 - последним, не изменяя HTML-структуру.

CSS

.order-container {
  display: flex;
  border: 1px solid #ccc;
  padding: 10px;
}

.item {
  padding: 20px;
  margin: 5px;
  background-color: #add8e6;
  text-align: center;
  flex: 1; /* Равномерное распределение */
}

.item-1 {
  input1: 2; /* Порядок для Блока 1 */
}

.item-2 {
  input2: 3; /* Порядок для Блока 2 */
}

.item-3 {
  input3: 1; /* Порядок для Блока 3 */
}

                     .order-container {
  display: flex;
  border: 1px solid #ccc;
  padding: 10px;
}

.item {
  padding: 20px;
  margin: 5px;
  background-color: #add8e6;
  text-align: center;
  flex: 1; /* Равномерное распределение */
}

.item-1 {
  input1: 2; /* Порядок для Блока 1 */
}

.item-2 {
  input2: 3; /* Порядок для Блока 2 */
}

.item-3 {
  input3: 1; /* Порядок для Блока 3 */
}

HTML

<div class="order-container">
  <div class="item item-1">Блок 1</div>
  <div class="item item-2">Блок 2</div>
  <div class="item item-3">Блок 3</div>
</div>

Используйте свойство `order` для flex-элементов. Элементы с меньшим значением `order` отображаются раньше. По умолчанию значение `order` равно 0.

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

Результат

Сообщения

Выполнить

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

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

Карточки с переносом строк

Есть контейнер с несколькими карточками фиксированной ширины. Сделайте так, чтобы карточки, которые не помещаются в одну строку, автоматически переносились на следующую.

CSS

.card-container {
  display: flex;
  input1: wrap; /* Разрешить перенос строк */
  border: 1px solid #ccc;
  padding: 5px;
}

.card {
  width: 100px; /* Фиксированная ширина */
  height: 80px;
  background-color: #90ee90;
  border: 1px solid #ccc;
  margin: 5px;
  display: flex; /* Для центрирования текста внутри */
  align-items: center;
  justify-content: center;
}

                     .card-container {
  display: flex;
  input1: wrap; /* Разрешить перенос строк */
  border: 1px solid #ccc;
  padding: 5px;
}

.card {
  width: 100px; /* Фиксированная ширина */
  height: 80px;
  background-color: #90ee90;
  border: 1px solid #ccc;
  margin: 5px;
  display: flex; /* Для центрирования текста внутри */
  align-items: center;
  justify-content: center;
}

HTML

<div class="card-container">
  <div class="card">Карточка 1</div>
  <div class="card">Карточка 2</div>
  <div class="card">Карточка 3</div>
  <div class="card">Карточка 4</div>
  <div class="card">Карточка 5</div>
</div>

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

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

Результат

Сообщения

Выполнить

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

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

Выравнивание отдельного элемента

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

CSS

.align-container {
  display: flex;
  align-items: center; /* Все элементы по центру */
  height: 150px;
  border: 1px solid #ccc;
  padding: 10px;
}

.item {
  width: 60px;
  height: 60px;
  background-color: #ffa07a;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
}

.item-b {
  height: 40px; /* Сделаем его пониже для наглядности */
  input1: flex-end; /* Выровнять этот элемент по нижнему краю */
}

                     .align-container {
  display: flex;
  align-items: center; /* Все элементы по центру */
  height: 150px;
  border: 1px solid #ccc;
  padding: 10px;
}

.item {
  width: 60px;
  height: 60px;
  background-color: #ffa07a;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
}

.item-b {
  height: 40px; /* Сделаем его пониже для наглядности */
  input1: flex-end; /* Выровнять этот элемент по нижнему краю */
}

HTML

<div class="align-container">
  <div class="item item-a">A</div>
  <div class="item item-b">B (вниз)</div>
  <div class="item item-c">C</div>
</div>

Используйте свойство `align-self` для конкретного flex-элемента, чтобы переопределить значение `align-items`, установленное для контейнера. Значение `flex-end` выровняет элемент по концу поперечной оси.

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

Результат

Сообщения

Выполнить

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

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

Вложенный Flexbox

Создайте структуру 'карточки товара' с изображением слева и блоком описания справа. Блок описания, в свою очередь, должен содержать заголовок и текст, расположенные вертикально, причем текст должен занимать все доступное пространство внутри блока описания.

CSS

.product-card {
  display: input1; /* Карточка - flex-контейнер */
  border: 1px solid #ccc;
  padding: 10px;
  max-width: 350px;
}

.product-image {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  object-fit: cover;
  flex-shrink: 0; /* Чтобы изображение не сжималось */
}

.product-info {
  display: input2; /* Блок описания - тоже flex-контейнер */
  input3: column; /* Элементы внутри описания - вертикально */
  flex-grow: 1; /* Блок описания занимает оставшееся место в карточке */
}

.product-title {
  margin: 0 0 5px 0;
  font-size: 1.1em;
}

.product-description {
  margin: 0;
  input4: 1; /* Описание растягивается внутри блока .product-info */
  font-size: 0.9em;
  color: #555;
}

                     .product-card {
  display: input1; /* Карточка - flex-контейнер */
  border: 1px solid #ccc;
  padding: 10px;
  max-width: 350px;
}

.product-image {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  object-fit: cover;
  flex-shrink: 0; /* Чтобы изображение не сжималось */
}

.product-info {
  display: input2; /* Блок описания - тоже flex-контейнер */
  input3: column; /* Элементы внутри описания - вертикально */
  flex-grow: 1; /* Блок описания занимает оставшееся место в карточке */
}

.product-title {
  margin: 0 0 5px 0;
  font-size: 1.1em;
}

.product-description {
  margin: 0;
  input4: 1; /* Описание растягивается внутри блока .product-info */
  font-size: 0.9em;
  color: #555;
}

HTML

<div class="product-card">
  <img src="https://naytikurs.ru/img/7.png" alt="Product Image" class="product-image">
  <div class="product-info">
    <h3 class="product-title">Название товара</h3>
    <p class="product-description">Описание товара, которое должно растянуться, чтобы занять доступное место по вертикали внутри этого блока.</p>
  </div>
</div>

Внешний контейнер карточки сделайте flex-контейнером (`display: flex`). Блок описания также сделайте flex-контейнером (`display: flex`) с `flex-direction: column`. Текстовому блоку внутри описания задайте `flex-grow: 1`.

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

Результат

Сообщения

Выполнить

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

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

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

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

CSS

.distribute-container {
  display: flex;
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 100px;
}

.d-item {
  padding: 15px;
  margin: 5px;
  background-color: #b0e0e6;
  text-align: center;
  color: #333;
}

.item-fixed {
  /* Базовая ширина 50px, не сжиматься, не расти */
  input1: 0 0 50px;
}

.item-grow-2 {
  /* Расти в 2 раза больше */
  input2: 2;
}

.item-grow-1 {
  /* Расти в 1 раз (по умолчанию) */
  input3: 1;
}

                     .distribute-container {
  display: flex;
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 100px;
}

.d-item {
  padding: 15px;
  margin: 5px;
  background-color: #b0e0e6;
  text-align: center;
  color: #333;
}

.item-fixed {
  /* Базовая ширина 50px, не сжиматься, не расти */
  input1: 0 0 50px;
}

.item-grow-2 {
  /* Расти в 2 раза больше */
  input2: 2;
}

.item-grow-1 {
  /* Расти в 1 раз (по умолчанию) */
  input3: 1;
}

HTML

<div class="distribute-container">
  <div class="d-item item-fixed">Fixed</div>
  <div class="d-item item-grow-2">Grow x2</div>
  <div class="d-item item-grow-1">Grow x1</div>
</div>

Первому блоку задайте `flex-basis: 50px` и `flex-shrink: 0`. Второму блоку задайте `flex-grow: 2`, а третьему - `flex-grow: 1`. Свойство `flex-basis` можно задавать и через шорткат `flex`.

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

Результат

Сообщения

Выполнить

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

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