Flex bloku secība CSS

Pieņemsim, ka mums ir doti šādi bloki, kas sakārtoti rindā:

<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;
}

Mainīsim to attēlošanas secību ekrānā, nemainot to secību HTML kodā.

Šim nolūkam pastāv īpašība order, kas nosaka konkrēto elementu secību saskaņā ar šādu likumu: kam ir lielāka vērtība, tas atrodas tuvāk ass beigām, un kam tā ir mazāka - tas atrodas tuvāk sākumam.

Īpašības vērtība var būt pozitīvs vai negatīvs skaitlis. Pēc noklusējuma visi elementi seko viens otram, tas nozīmē, ka order tiem ir nulle.

Mainīsim mūsu elementu secību. Lai to izdarītu, otrajam elementam iestatīsim papildu klasi elem un šai klasei iestatīsim īpašību order uz vērtību 1:

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

Tā kā visiem elementiem pēc noklusējuma būs secība 0, bet mūsu otrajam elementam būs secība lielāka par pārējiem, tad tas atradīsies aiz tiem:

Tagad iestatīsim negatīvu vērtību -1:

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

Šajā gadījumā mūsu bloks pārvietosies uz ass sākumu:

Patstāvīgi izmēģiniet šīs īpašības darbību dažādiem ass virzieniem.