Свойство order

Описание

Определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему. При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.

Синтаксис

order: число;

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 .flex-container {
 padding: 0;
 margin: 0;
 list-style: none;
 display: flex;
 flex-flow: row wrap;
 }
 .flex-item {
 background: #03ffbc;
 border: 3px solid blue;
 color: black;
 padding: 20px 30px;
 margin: 5px;
 font-size: 2em;
 }
 .flex-item:nth-of-type(1) {
 order: 5;
 }
 .flex-item:nth-of-type(2) {
 order: 4;
 }
 .flex-item:nth-of-type(3) {
 order: 3;
 }
 .flex-item:nth-of-type(4) {
 order: 2;
 }
 .flex-item:nth-of-type(5) {
 order: 1;
 }
 </style>
 <ul class='flex-container'>
 <li class='flex-item'>1</li>
 <li class='flex-item'>2</li>
 <li class='flex-item'>3</li>
 <li class='flex-item'>4</li>
 <li class='flex-item'>5</li>
 </ul>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5

Читайте также

Свойство background-image

Задает фоновое изображение элемента. В качестве значения указывается путь к изображению. Он может...

Свойство word-break

Указывает, как делать перенос строк внутри слов, которые не помещаются по ширине в заданную область.

Свойство

Задаёт, как выводить линию под или над текстом, когда линия пересекает выносные элементы букв, вр...

Свойство grid-row-gap

Определяет размер ширины линий. Вы можете думать об этом, как о настройке ширины отступов между с...

Стиль подсказывающего текста

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