Vlastnosť order

Vlastnosť order určuje poradie jednotlivého flex bloku vo vnútri flex kontajnera. Aplikuje sa na konkrétny flex blok.

Jej hodnotou je kladné alebo záporné celé číslo. Čím menšie číslo, tým skôr bude element umiestnený, nezávisle od jeho pozície v HTML kóde v porovnaní s inými elementami.

Syntax

selektor {
	order: kladné alebo záporné číslo;
}

Príklad

V tomto príklade je všetkým blokom určené poradie umiestnenia pomocou order. Úplne prvým blokom bude blok so záporným order -1, potom s order 1 a tak ďalej podľa vzostupného poradia:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
	<div id="elem6">6</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
}
#parent > div {
	border: 1px solid #696989;
	min-width: 100px;
}
#elem1 {
	order: 4;
}
#elem2 {
	order: 5;
}
#elem3 {
	order: 3;
}
#elem4 {
	order: 2;
}
#elem5 {
	order: 1;
}
#elem6 {
	order: -1;
}

Pozrite tiež

vlastnosť flex-direction,
ktorá určuje smer osí flex blokov
vlastnosť justify-content,
ktorá určuje zarovnanie pozdĺž hlavnej osi
vlastnosť align-items,
ktorá určuje zarovnanie pozdĺž priečnej osi
vlastnosť flex-wrap,
ktorá určuje viacriadkovosť flex blokov
vlastnosť flex-flow,
skratka pre flex-direction a flex-wrap
vlastnosť align-self,
ktorá určuje zarovnanie jedného bloku
vlastnosť flex-basis,
ktorá určuje veľkosť konkrétneho flex bloku
vlastnosť flex-grow,
ktorá určuje "lakomosť" flex blokov
vlastnosť flex-shrink,
ktorá určuje stlačiteľnosť flex blokov
vlastnosť flex,
skratka pre flex-grow, flex-shrink a flex-basis