Flex ბლოკების თანმიმდევრობა CSS-ში

დავუშვათ, გვაქვს მოცემული შემდეგი ბლოკები, განლაგებული რიგში:

<div class="parent">
	<div class="child">1</div>
	<div class="child">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;
}

მოდით შევცვალოთ მათი ჩვენების თანმიმდევრობა ეკრანზე, HTML კოდში მათი თანმიმდევრობის შეცვლის გარეშე.

ამისთვის არსებობს თვისება order, რომელიც განსაზღვრავს კონკრეტული ელემენტების მიყოლის თანმიმდევრობას შემდეგი წესის მიხედვით: ვისაც უფრო დიდი მნიშვნელობა აქვს, ის უფრო ახლოს დგას ღერძის ბოლოსთან, ხოლო ვისაც უფრო პატარა - ის უფრო ახლოს დგას დასაწყისთან.

თვისების მნიშვნელობა შეიძლება იყოს დადებითი ან უარყოფითი რიცხვი. ნაგულისხმევად, ყველა ელემენტი მიჰყვება ერთმანეთს, ეს ნიშნავს, რომ order მათთვის არის ნული.

მოდით შევცვალოთ ჩვენი ელემენტების თანმიმდევრობა. ამისთვის მეორე ელემენტს დავუმატოთ დამატებითი კლასი elem და ამ კლასისთვის დავაყენოთ თვისება order მნიშვნელობაზე 1:

.elem {
	order: 1;
	border: 1px solid red;
}

ვინაიდან ყველა ელემენტს ნაგულისხმევად ექნება თანმიმდევრობა 0, ხოლო ჩვენს მეორე ელემენტს ექნება თანმიმდევრობა უფრო დიდი, ვიდრე დანარჩენებს, ის განთავსდება მათ შემდეგ:

მოდით ახლა დავაყენოთ უარყოფითი მნიშვნელობა -1:

.elem {
	order: -1;
	border: 1px solid red;
}

ამ შემთხვევაში ჩვენი ბლოკი გადაინაცვლებს ღერძის დასაწყისში:

თავად გამოცადეთ ამ თვისების მუშაობა ღერძის სხვადასხვა მიმართულებისთვის.