Порядок flex-блоків у CSS

Порядок flex-блоків у CSS

За замовчуванням flex-елементи відображаються у тому порядку, у якому вони записані в HTML-коді.

Властивість order дозволяє змінити порядок відображення елементів без переміщення їх у HTML.

<div class="parent">
  <div class="child">1</div>
  <div class="child elem">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

.parent {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  width: 300px;
  height: 200px;
  border: 1px solid red;
}

.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}

Властивість order

За замовчуванням всі flex-елементи мають order: 0. Елемент із більшим значенням order буде ближче до кінця головної осі.

.elem {
  order: 1;
}

.elem {
  order: -1;
}

• order: 0 — значення за замовчуванням.
• Більше значення order переміщує елемент ближче до кінця.
• Менше значення order переміщує елемент ближче до початку.
• order може мати як позитивні, так і негативні числа.
• HTML-код при цьому залишається без змін.

Практичні завдання

.elem {
  order: 1;
}