CSS-de flex bloglaryň tertibi

Aşakdaky hatarda tertiplenen bloglarymyz bolsun:

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

Geliň, olary ekranda görkeziliş tertibini üýtşetäýliň, HTML kodundaky tertibini üýtgetmän.

Bunun üçin order häsiýeti bar, olar konkret elementleriň yzygiderligini şu düzgün boýunça belgileýär: kimifiň bahasy uly bolsa, şol oküň ahyryna ýakyn durýar, we kimifiň kiçi bolsa - şol oküň başyna ýakyn durýar.

Häsiýetiň bahasy pozitiw ýa-da negatiw san bolup biler. Bellenen ýagdaýda ähli elementler biri-biriniň yzydan gidýär, bu bolsa order olaryň nolda dygyny aňladýar.

Geliň elementleriň tertibini üýtşetäýliň. Bunun üçin ikinji elemente goşmaça elem klasyny bereliň we şu klas üçin order häsiýetini 1 bahasyna goýalyň:

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

Bellenen ýagdaýda ähli elementleriň tertibi 0 bolar, bizifiň ikinji elementimiziň tertibi başgalaryňkydan uly bolar, şonuň üçin ol olardan soň ýerleşer:

Indi bolsa, -1 negatiw bahasyny bereliň:

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

Bu ýagdaýda bizifiň blogymyz oküň başyna tarap ýerleşer:

Bu häsiýetiň işini oküň dürli ugurlary üçin özüňiz barlap görüň.