order प्रॉपर्टी

order प्रॉपर्टी फ्लेक्स-कंटेनर के अंदर एक अलग flex-ब्लॉक का क्रम निर्धारित करती है। यह एक विशिष्ट फ्लेक्स ब्लॉक पर लागू होती है।

यह प्रॉपर्टी एक धनात्मक या ऋणात्मक पूर्णांक को अपना मान के रूप में लेती है। संख्या जितनी छोटी होगी, तत्व उतना पहले खड़ा होगा, भले ही वह अन्य तत्वों के सापेक्ष HTML कोड में कहीं भी स्थित क्यों न हो।

सिंटैक्स

सिलेक्टर {
	order: धनात्मक या ऋणात्मक संख्या;
}

उदाहरण

इस उदाहरण में, सभी ब्लॉकों को order का उपयोग करके उनके स्थान का क्रम निर्धारित किया गया है। सबसे पहला ब्लॉक ऋणात्मक order -1 वाला होगा, फिर order 1 वाला और इसी तरह आरोही क्रम में:

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

यह भी देखें

flex-direction प्रॉपर्टी,
जो फ्लेक्स ब्लॉकों के अक्षों की दिशा निर्धारित करती है
justify-content प्रॉपर्टी,
जो मुख्य अक्ष के साथ संरेखण निर्धारित करती है
align-items प्रॉपर्टी,
जो क्रॉस अक्ष के साथ संरेखण निर्धारित करती है
flex-wrap प्रॉपर्टी,
जो फ्लेक्स ब्लॉकों की मल्टीलाइन क्षमता निर्धारित करती है
flex-flow प्रॉपर्टी,
flex-direction और flex-wrap के लिए शॉर्टहैंड
align-self प्रॉपर्टी,
जो एक ब्लॉक का संरेखण निर्धारित करती है
flex-basis प्रॉपर्टी,
जो एक विशिष्ट फ्लेक्स ब्लॉक का आकार निर्धारित करती है
flex-grow प्रॉपर्टी,
जो फ्लेक्स ब्लॉकों की "विस्तार क्षमता" निर्धारित करती है
flex-shrink प्रॉपर्टी,
जो फ्लेक्स ब्लॉकों की "सिकुड़ने की क्षमता" निर्धारित करती है
flex प्रॉपर्टी,
flex-grow, flex-shrink और flex-basis के लिए शॉर्टहैंड