CSS में फ्लेक्स ब्लॉकों का क्रम
मान लीजिए कि हमारे पास निम्नलिखित ब्लॉक हैं, जो एक पंक्ति में व्यवस्थित हैं:
<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;
}
:
आइए HTML कोड में उनके क्रम को बदले बिना स्क्रीन पर उनके प्रदर्शन का क्रम बदलें।
इसके लिए order गुण मौजूद है,
जो विशिष्ट तत्वों के अनुक्रम को निम्नलिखित नियम के अनुसार निर्धारित करता है: जिसका मान अधिक होता है, वह अक्ष के अंत के करीब होता है, और
जिसका कम होता है - वह शुरुआत के करीब होता है।
गुण का मान एक धनात्मक या ऋणात्मक संख्या हो सकता है। डिफ़ॉल्ट रूप से सभी
तत्व एक दूसरे के बाद आते हैं, इसका मतलब है कि उनका order शून्य है।
आइए अपने तत्वों का क्रम बदलें।
इसके लिए दूसरे तत्व को एक अतिरिक्त क्लास elem दें और इस क्लास के लिए order गुण को 1 मान दें:
.elem {
order: 1;
border: 1px solid red;
}
चूंकि डिफ़ॉल्ट रूप से सभी तत्वों का क्रम 0 होगा,
और हमारा दूसरा तत्व बाकियों की तुलना में अधिक क्रम वाला होगा, तो वह
उनके बाद स्थित होगा:
आइए अब ऋणात्मक मान -1 निर्धारित करें:
.elem {
order: -1;
border: 1px solid red;
}
इस स्थिति में हमारा ब्लॉक अक्ष की शुरुआत में चला जाएगा:
विभिन्न अक्ष दिशाओं के लिए इस गुण के काम को स्वयं आज़माएं।
