Порядок элементов с order: Тренажер CSS

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

На этой странице собраны задания для тренировки использования CSS свойства `order`. Это свойство является частью модуля Flexible Box Layout (Flexbox) и позволяет изменять визуальный порядок отображения flex-элементов внутри их контейнера, не изменяя их порядок в HTML-коде. Задания варьируются от простых, где нужно изменить позицию одного элемента, до более сложных, требующих перестановки нескольких элементов в определенной последовательности. Вы будете заполнять пропущенные части CSS-кода, чтобы добиться нужного визуального результата, который будет отображаться в iframe.

Список тем

Перемещение элемента в конец

Используя свойство `order`, сделайте так, чтобы первый элемент ('Item 1') визуально отображался последним среди всех элементов в контейнере.

CSS

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

.item {
  padding: 20px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  text-align: center;
}

.item-1 {
  background-color: #add8e6; /* Light Blue */
  input1: input2;
}

.item-2 {
  background-color: #90ee90; /* Light Green */
}

.item-3 {
  background-color: #ffb6c1; /* Light Pink */
}

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

.item {
  padding: 20px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  text-align: center;
}

.item-1 {
  background-color: #add8e6; /* Light Blue */
  input1: input2;
}

.item-2 {
  background-color: #90ee90; /* Light Green */
}

.item-3 {
  background-color: #ffb6c1; /* Light Pink */
}

HTML

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

Для перемещения flex-элемента в конец визуального порядка относительно других элементов с `order: 0` (значение по умолчанию), используйте свойство `order` с положительным значением (например, 1). Примените это свойство к селектору `.item-1`.

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

Результат

Сообщения

Выполнить

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

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

Перемещение элемента в начало

Сделайте так, чтобы последний элемент ('Item 3') визуально отображался первым в контейнере.

CSS

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

.item {
  padding: 20px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  text-align: center;
}

.item-1 {
  background-color: #add8e6; /* Light Blue */
}

.item-2 {
  background-color: #90ee90; /* Light Green */
}

.item-3 {
  background-color: #ffb6c1; /* Light Pink */
  input1: input2;
}

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

.item {
  padding: 20px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  text-align: center;
}

.item-1 {
  background-color: #add8e6; /* Light Blue */
}

.item-2 {
  background-color: #90ee90; /* Light Green */
}

.item-3 {
  background-color: #ffb6c1; /* Light Pink */
  input1: input2;
}

HTML

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

Чтобы переместить flex-элемент в начало визуального порядка относительно других элементов с `order: 0`, используйте свойство `order` с отрицательным значением (например, -1). Примените это свойство к селектору `.item-3`.

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

Результат

Сообщения

Выполнить

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

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

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

Измените порядок элементов так, чтобы они отображались в последовательности: 'Item 2', 'Item 3', 'Item 1'.

CSS

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

.item {
  padding: 20px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  text-align: center;
}

.item-1 {
  background-color: #add8e6; /* Light Blue */
  order: input1;
}

.item-2 {
  background-color: #90ee90; /* Light Green */
  order: input2;
}

.item-3 {
  background-color: #ffb6c1; /* Light Pink */
  order: input3;
}

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

.item {
  padding: 20px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  text-align: center;
}

.item-1 {
  background-color: #add8e6; /* Light Blue */
  order: input1;
}

.item-2 {
  background-color: #90ee90; /* Light Green */
  order: input2;
}

.item-3 {
  background-color: #ffb6c1; /* Light Pink */
  order: input3;
}

HTML

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

Задайте разные значения `order` для всех трех элементов. Элементы сортируются по значению `order` от меньшего к большему. Чтобы 'Item 2' был первым, задайте ему наименьшее значение (например, -1 или 1). Чтобы 'Item 3' был вторым, задайте ему значение больше, чем у 'Item 2', но меньше, чем у 'Item 1' (например, 0 или 2). Чтобы 'Item 1' был последним, задайте ему наибольшее значение (например, 1 или 3). Одна из возможных комбинаций: `order: 1` для `.item-1`, `order: -1` для `.item-2`, `order: 0` для `.item-3`.

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

Результат

Сообщения

Выполнить

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

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

Порядок по умолчанию и отрицательные значения

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

CSS

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

.item {
  padding: 15px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  text-align: center;
  flex-grow: 1;
}

.item-1 {
  background-color: #add8e6; /* Light Blue */
  /* По умолчанию order: 0 */
}

.item-2 {
  background-color: #90ee90; /* Light Green */
  /* По умолчанию order: 0 */
}

.item-3 {
  background-color: #ffb6c1; /* Light Pink */
  /* По умолчанию order: 0 */
}

.item-4 {
  background-color: #f5deb3; /* Wheat */
  input1: input2;
}

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

.item {
  padding: 15px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  text-align: center;
  flex-grow: 1;
}

.item-1 {
  background-color: #add8e6; /* Light Blue */
  /* По умолчанию order: 0 */
}

.item-2 {
  background-color: #90ee90; /* Light Green */
  /* По умолчанию order: 0 */
}

.item-3 {
  background-color: #ffb6c1; /* Light Pink */
  /* По умолчанию order: 0 */
}

.item-4 {
  background-color: #f5deb3; /* Wheat */
  input1: input2;
}

HTML

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

Элементы без явно заданного `order` имеют `order: 0`. Чтобы 'Item 4' стал первым, задайте ему `order: -1` (или любое другое отрицательное значение). Чтобы 'Item 1' шел сразу за ним, но перед элементами с `order: 0`, ему тоже нужно задать отрицательное значение, но большее, чем у 'Item 4' (например, `order: 0` не подойдет, так как он встанет в группу с Item 2 и Item 3; используйте значение между -1 и 0, но так как order принимает целые числа, это невозможно. Значит, нужно 'Item 4' задать `order: -2`, а 'Item 1' - `order: -1`). Либо 'Item 4' задать `order: -1`, а 'Item 1', 'Item 2', 'Item 3' задать `order: 0`, `order: 1`, `order: 2` соответственно. Самый простой способ: `order: -1` для `.item-4` и оставить `order: 0` (по умолчанию) для `.item-1`. Тогда порядок будет: Item 4, Item 1, Item 2, Item 3. Чтобы получить Item 4, Item 1, Item 2, Item 3, задайте `order: -1` для `.item-4` и `order: 0` для `.item-1` (хотя 0 - значение по умолчанию, явное указание не помешает).

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

Результат

Сообщения

Выполнить

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

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

Элементы с одинаковым значением order

Сделайте так, чтобы 'Item 1' и 'Item 3' отображались после 'Item 2' и 'Item 4'. При этом 'Item 1' должен идти перед 'Item 3'.

CSS

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

.item {
  padding: 15px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  text-align: center;
  flex-grow: 1;
}

.item-1 {
  background-color: #add8e6; /* Light Blue */
  input1: input2;
}

.item-2 {
  background-color: #90ee90; /* Light Green */
  /* order: 0 по умолчанию */
}

.item-3 {
  background-color: #ffb6c1; /* Light Pink */
  input3: input4;
}

.item-4 {
  background-color: #f5deb3; /* Wheat */
  /* order: 0 по умолчанию */
}

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

.item {
  padding: 15px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  text-align: center;
  flex-grow: 1;
}

.item-1 {
  background-color: #add8e6; /* Light Blue */
  input1: input2;
}

.item-2 {
  background-color: #90ee90; /* Light Green */
  /* order: 0 по умолчанию */
}

.item-3 {
  background-color: #ffb6c1; /* Light Pink */
  input3: input4;
}

.item-4 {
  background-color: #f5deb3; /* Wheat */
  /* order: 0 по умолчанию */
}

HTML

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

Элементы с одинаковым значением `order` располагаются в соответствии с их порядком в HTML. Чтобы 'Item 1' и 'Item 3' оказались после 'Item 2' и 'Item 4' (у которых `order: 0` по умолчанию), задайте им одинаковое положительное значение `order`, например, 1. Так как 'Item 1' идет раньше 'Item 3' в HTML, он и будет отображаться первым в группе с `order: 1`.

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

Результат

Сообщения

Выполнить

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

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

Указание свойства order

Третий элемент ('Item 3') должен отображаться первым. В коде уже есть значение `-1`, но пропущено само имя свойства. Впишите правильное имя свойства.

CSS

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

.item {
  padding: 20px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  text-align: center;
}

.item-1 {
  background-color: #add8e6;
}

.item-2 {
  background-color: #90ee90;
}

.item-3 {
  background-color: #ffb6c1;
  input1: -1;
}

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

.item {
  padding: 20px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  text-align: center;
}

.item-1 {
  background-color: #add8e6;
}

.item-2 {
  background-color: #90ee90;
}

.item-3 {
  background-color: #ffb6c1;
  input1: -1;
}

HTML

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

Свойство, управляющее визуальным порядком flex-элементов, называется `order`. Впишите `order` в поле input1.

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

Результат

Сообщения

Выполнить

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

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

Сложная перестановка с изображениями

Расположите элементы с изображениями в следующем порядке: сначала элемент с `8.png`, затем с `4.png`, потом `1.png` и последним `6.png`.

CSS

.container {
  display: flex;
  border: 1px solid #ccc;
  padding: 10px;
  align-items: center; /* Выравниваем по центру для красоты */
}

.img-item {
  margin: 5px;
  border: 1px solid #ddd;
  padding: 5px;
  background: #f9f9f9;
}

.img-item img {
  display: block;
  max-width: 60px; /* Уменьшим размер картинок */
  height: auto;
}

.item-1 {
  input1: input2; /* Должен быть третьим */
}

.item-4 {
  input3: input4; /* Должен быть вторым */
}

.item-6 {
  input5: input6; /* Должен быть последним */
}

.item-8 {
  input7: input8; /* Должен быть первым */
}

                     .container {
  display: flex;
  border: 1px solid #ccc;
  padding: 10px;
  align-items: center; /* Выравниваем по центру для красоты */
}

.img-item {
  margin: 5px;
  border: 1px solid #ddd;
  padding: 5px;
  background: #f9f9f9;
}

.img-item img {
  display: block;
  max-width: 60px; /* Уменьшим размер картинок */
  height: auto;
}

.item-1 {
  input1: input2; /* Должен быть третьим */
}

.item-4 {
  input3: input4; /* Должен быть вторым */
}

.item-6 {
  input5: input6; /* Должен быть последним */
}

.item-8 {
  input7: input8; /* Должен быть первым */
}

HTML

<div class="container">
  <div class="img-item item-1"><img src="https://naytikurs.ru/img/1.png" alt="Image 1"></div>
  <div class="img-item item-4"><img src="https://naytikurs.ru/img/4.png" alt="Image 4"></div>
  <div class="img-item item-6"><img src="https://naytikurs.ru/img/6.png" alt="Image 6"></div>
  <div class="img-item item-8"><img src="https://naytikurs.ru/img/8.png" alt="Image 8"></div>
</div>

Задайте свойство `order` для каждого элемента `.img-item`. Элементу с `8.png` присвойте наименьшее значение (например, -1 или 1). Элементу с `4.png` присвойте значение больше, чем у `8.png`, но меньше, чем у `1.png` (например, 0 или 2). Элементу с `1.png` присвойте значение больше, чем у `4.png`, но меньше, чем у `6.png` (например, 1 или 3). Элементу с `6.png` присвойте наибольшее значение (например, 2 или 4). Пример: `.item-8 { order: -1; }`, `.item-4 { order: 0; }`, `.item-1 { order: 1; }`, `.item-6 { order: 2; }`.

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

Результат

Сообщения

Выполнить

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

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