Flex-контейнер и flex-direction: Тренажер CSS

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

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

Список тем

Создание Flex-контейнера

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

CSS

.container {
  background-color: #eee;
  padding: 15px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  /* --- Задание --- */
  display: input1;
  /* --------------- */
}

.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
  min-width: 50px; /* Минимальная ширина для наглядности */
}

                     .container {
  background-color: #eee;
  padding: 15px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  /* --- Задание --- */
  display: input1;
  /* --------------- */
}

.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
  min-width: 50px; /* Минимальная ширина для наглядности */
}

HTML

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

Чтобы элемент стал flex-контейнером, необходимо задать ему свойство `display` со значением `flex`.

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

Результат

Сообщения

Выполнить

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

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

Расположение в строку (по умолчанию)

Теперь, когда контейнер является flex-контейнером, его дочерние элементы выстроились в ряд. Это поведение по умолчанию. Ваша задача - явно указать направление основной оси как 'строка' (row), используя соответствующее свойство.

CSS

.container {
  background-color: #eee;
  padding: 15px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  display: flex;
  /* --- Задание --- */
  input1: input2;
  /* --------------- */
}

.item {
  background-color: #2196F3;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
  min-width: 50px;
}

                     .container {
  background-color: #eee;
  padding: 15px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  display: flex;
  /* --- Задание --- */
  input1: input2;
  /* --------------- */
}

.item {
  background-color: #2196F3;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
  min-width: 50px;
}

HTML

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

Используйте свойство `flex-direction`, чтобы задать направление основной оси. Значение `row` располагает элементы в строку слева направо.

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

Результат

Сообщения

Выполнить

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

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

Расположение в столбец

Измените CSS таким образом, чтобы элементы внутри flex-контейнера располагались не в строку, а в столбец, один под другим.

CSS

.container {
  background-color: #eee;
  padding: 15px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  display: flex;
  /* --- Задание --- */
  flex-direction: input1;
  /* --------------- */
}

.item {
  background-color: #ff9800;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
}

                     .container {
  background-color: #eee;
  padding: 15px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  display: flex;
  /* --- Задание --- */
  flex-direction: input1;
  /* --------------- */
}

.item {
  background-color: #ff9800;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

Обратный порядок в строке

Снова расположите элементы в строку, но на этот раз в обратном порядке: элемент 3 должен быть первым слева, затем элемент 2, и последним - элемент 1.

CSS

.container {
  background-color: #eee;
  padding: 15px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  display: flex;
  /* --- Задание --- */
  input1: input2;
  /* --------------- */
}

.item {
  background-color: #e91e63;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
  min-width: 40px;
}

                     .container {
  background-color: #eee;
  padding: 15px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  display: flex;
  /* --- Задание --- */
  input1: input2;
  /* --------------- */
}

.item {
  background-color: #e91e63;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
  min-width: 40px;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

Обратный порядок в столбце

Теперь расположите элементы в столбец, но в обратном порядке: элемент 3 должен быть сверху, затем элемент 2, и последним снизу - элемент 1.

CSS

.container {
  background-color: #eee;
  padding: 15px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  display: flex;
  /* --- Задание --- */
  flex-direction: input1;
  /* --------------- */
}

.item {
  background-color: #673ab7;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
}

                     .container {
  background-color: #eee;
  padding: 15px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  display: flex;
  /* --- Задание --- */
  flex-direction: input1;
  /* --------------- */
}

.item {
  background-color: #673ab7;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

Применение Flex к конкретному контейнеру

На странице два контейнера с классом `.box`. Сделайте так, чтобы только первый контейнер (с id `target-box`) стал flex-контейнером, а его элементы расположились в строку. Второй контейнер должен остаться без изменений.

CSS

.box {
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 15px;
}

.item {
  background-color: #00bcd4;
  color: white;
  padding: 15px;
  margin: 5px;
  text-align: center;
}

/* --- Задание --- */
#target-box {
  input1: input2;
  /* Можно добавить flex-direction: row; но это не обязательно */
}
/* --------------- */

                     .box {
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 15px;
}

.item {
  background-color: #00bcd4;
  color: white;
  padding: 15px;
  margin: 5px;
  text-align: center;
}

/* --- Задание --- */
#target-box {
  input1: input2;
  /* Можно добавить flex-direction: row; но это не обязательно */
}
/* --------------- */

HTML

<div id="target-box" class="box">
  <div class="item">A</div>
  <div class="item">B</div>
</div>

<div class="box">
  <div class="item">C</div>
  <div class="item">D</div>
</div>

Используйте селектор по ID (`#target-box`), чтобы применить стили только к нужному контейнеру. Задайте ему свойство `display` со значением `flex`. Направление `row` является значением по умолчанию для `flex-direction`, поэтому его можно не указывать явно, но для практики можно добавить `flex-direction: row;`.

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

Результат

Сообщения

Выполнить

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

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

Вертикальное меню

Превратите список ссылок в вертикальное меню. Контейнер `nav` уже является flex-контейнером. Вам нужно лишь изменить направление основной оси.

CSS

nav {
  display: flex;
  background-color: #333;
  padding: 10px;
  /* --- Задание --- */
  input1: input2;
  /* --------------- */
}

nav a {
  color: white;
  padding: 10px 15px;
  text-decoration: none;
  text-align: center;
}

nav a:hover {
  background-color: #555;
}

                     nav {
  display: flex;
  background-color: #333;
  padding: 10px;
  /* --- Задание --- */
  input1: input2;
  /* --------------- */
}

nav a {
  color: white;
  padding: 10px 15px;
  text-decoration: none;
  text-align: center;
}

nav a:hover {
  background-color: #555;
}

HTML

<nav>
  <a href="#">Главная</a>
  <a href="#">Продукты</a>
  <a href="#">Контакты</a>
</nav>

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

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

Результат

Сообщения

Выполнить

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

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

Галерея изображений в столбец

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

CSS

.gallery {
  border: 2px solid #ccc;
  padding: 10px;
  /* --- Задание --- */
  display: input1;
  flex-direction: input2;
  /* --------------- */
}

.gallery img {
  max-width: 80px; /* Ограничим ширину для наглядности */
  height: auto;
  margin: 5px;
  border: 1px solid #ddd;
}

                     .gallery {
  border: 2px solid #ccc;
  padding: 10px;
  /* --- Задание --- */
  display: input1;
  flex-direction: input2;
  /* --------------- */
}

.gallery img {
  max-width: 80px; /* Ограничим ширину для наглядности */
  height: auto;
  margin: 5px;
  border: 1px solid #ddd;
}

HTML

<div class="gallery">
  <img src="https://naytikurs.ru/img/1.png" alt="Image 1">
  <img src="https://naytikurs.ru/img/2.png" alt="Image 2">
  <img src="https://naytikurs.ru/img/4.png" alt="Image 4">
</div>

Контейнер `.gallery` должен стать flex-контейнером (`display: flex`). Затем установите направление основной оси на вертикальное с помощью `flex-direction: column`.

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

Результат

Сообщения

Выполнить

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

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

Изображения в обратном порядке (строка)

Расположите изображения в контейнере `.image-row` в одну строку, но в обратном порядке (последнее изображение должно стать первым).

CSS

.image-row {
  border: 2px solid lightblue;
  padding: 10px;
  /* --- Задание --- */
  display: input1;
  input2: input3;
  /* --------------- */
}

.image-row img {
  max-width: 60px;
  height: auto;
  margin: 0 5px;
  border: 1px solid #eee;
}

                     .image-row {
  border: 2px solid lightblue;
  padding: 10px;
  /* --- Задание --- */
  display: input1;
  input2: input3;
  /* --------------- */
}

.image-row img {
  max-width: 60px;
  height: auto;
  margin: 0 5px;
  border: 1px solid #eee;
}

HTML

<div class="image-row">
  <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>

Сделайте контейнер `.image-row` flex-контейнером (`display: flex`) и используйте `flex-direction: row-reverse` для изменения порядка элементов на обратный по горизонтали.

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

Результат

Сообщения

Выполнить

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

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

Карточки в обратном вертикальном порядке

Есть контейнер с карточками (`.card`). Расположите эти карточки вертикально, но в обратном порядке: последняя карточка должна оказаться сверху.

CSS

.card-container {
  border: 1px solid #ddd;
  padding: 10px;
  background-color: #fafafa;
  /* --- Задание --- */
  display: input1;
  flex-direction: input2;
  /* --------------- */
}

.card {
  border: 1px solid #ccc;
  background-color: white;
  padding: 15px;
  margin: 8px 0;
}

.card h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.card p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

                     .card-container {
  border: 1px solid #ddd;
  padding: 10px;
  background-color: #fafafa;
  /* --- Задание --- */
  display: input1;
  flex-direction: input2;
  /* --------------- */
}

.card {
  border: 1px solid #ccc;
  background-color: white;
  padding: 15px;
  margin: 8px 0;
}

.card h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.card p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

HTML

<div class="card-container">
  <div class="card">
    <h4>Карточка 1</h4>
    <p>Содержимое первой карточки.</p>
  </div>
  <div class="card">
    <h4>Карточка 2</h4>
    <p>Содержимое второй карточки.</p>
  </div>
  <div class="card">
    <h4>Карточка 3</h4>
    <p>Содержимое третьей карточки.</p>
  </div>
</div>

Примените к контейнеру `.card-container` свойство `display: flex` и `flex-direction: column-reverse`.

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

Результат

Сообщения

Выполнить

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

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