CSS में फ्लेक्स मॉडल में अलग-अलग एलिमेंट को अलाइन करना
निम्नलिखित गुण जो हम पढ़ेंगे,
अब फ्लेक्स एलिमेंट के पैरेंट को नहीं दिए जाते,
बल्कि एलिमेंट्स自身 को दिए जाते हैं। आइए हम
align-self गुण को देखें, जो क्रॉस एक्सिस पर
अलग-अलग ब्लॉक को अलाइन करता है।
मान लीजिए कि हमारे पास फ्लेक्स ब्लॉक्स हैं, जिन्हें एक पंक्ति में
व्यवस्थित किया गया है। उन्हें वर्टिकल रूप से सेंटर में अलाइन करने के लिए,
align-items को center वैल्यू पर सेट करें,
और दूसरे एलिमेंट को एक अतिरिक्त क्लास
elem दें और उसके लिए एक अलग अलाइनमेंट सेट करें,
उदाहरण के लिए, उसे ऊपरी किनारे से चिपका दें।
इसके लिए, elem क्लास वाले हमारे एलिमेंट
में align-self गुण को
flex-start वैल्यू पर सेट करें:
<div class="parent">
<div class="child">1</div>
<div class="child elem">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
.parent {
display: flex;
align-items: center;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
.elem {
align-self: flex-start;
}
:
