Rendi i blloqeve flex në CSS

Le të themi se kemi blloqet e mëposhtme, të rreshtuara në një rresht:

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

Le të ndryshojmë rendin e shfaqjes së tyre në ekran, pa ndryshuar rendin e tyre në kodin HTML.

Për këtë ekziston vetia order, e cila cakton rendin e ndjekjes së elementeve specifike sipas rregullit të mëposhtëm: ai që ka vlerë më të madhe, qëndron më afër fundit të boshtit, ndërsa ai që ka vlerë më të vogël - qëndron më afër fillimit.

Si vlerë, vetia mund të pranojë numër pozitiv ose negativ. Si parazgjedhje, të gjithë elementet ndjekin njëri-tjetrin, kjo do të thotë se order për ta është zero.

Le të ndryshojmë rendin e elementeve tanë. Për këtë, le t'i caktojmë elementit të dytë një klasë shtesë elem dhe për këtë klasë do të caktojmë vetinë order në vlerën 1:

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

Meqenëse të gjithë elementet si parazgjedhje do të kenë rend 0, ndërsa elementi ynë i dytë do të ketë rend më të madh se të tjerët, atëherë ai do të vendoset pas tyre:

Tani le të caktojmë vlerën negative -1:

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

Në këtë rast, blloku ynë do të zhvendoset në fillim të boshtit:

Provoni vetë funksionimin e kësaj vetie për drejtime të ndryshme të boshtit.