संरेखण-स्व - सीएसएस-ट्रिक्स

align-selfसंपत्ति लचीला बॉक्स लेआउट मॉड्यूल की एक उप-संपत्ति है।

align-itemsविशिष्ट फ्लेक्स आइटम के लिए मूल्य को ओवरराइड करना संभव बनाता है ।

align-selfसंपत्ति के रूप में ही 5 मान स्वीकार करता है align-items:

• flex-start: क्रॉस-स्टार्ट मार्जिन आइटम का किनारा क्रॉस-स्टार्ट लाइन पर रखा गया है
• flex-end: आइटम का क्रॉस-एंड मार्जिन किनारा क्रॉस-एंड लाइन पर रखा गया है
• center: आइटम क्रॉस-एक्सिस में केंद्रित है
• baseline: आइटम ऐसे संरेखित किए जाते हैं जैसे उनकी आधार रेखा संरेखित की जाती है
• stretch (डिफ़ॉल्ट): कंटेनर को भरने के लिए खिंचाव (अभी भी न्यूनतम-चौड़ाई / अधिकतम-चौड़ाई का सम्मान करें)

वाक्य - विन्यास

align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )

डेमो

निम्नलिखित डेमो से पता चलता है कि कोई वस्तु align-selfमूल्य के आधार पर फ्लेक्स कंटेनर में खुद को कैसे संरेखित कर सकती है :

• 1 आइटम पर सेट है flex-start
• दूसरा आइटम सेट किया गया है flex-end
• 3 आइटम को सेट किया गया है center
• 4 म आइटम सेट है baseline
• 5 वें आइटम पर सेट है stretch

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन अलाइन-सेल्फ डेमो देखें।

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
21 *	२।	1 1	१२	6.1 *

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	4.4	7.0-7.1 *

सबसे अच्छा ब्राउज़र समर्थन पाने के लिए वाक्यविन्यास को कैसे मिलाया जाए, इसके बारे में अधिक जानकारी के लिए, कृपया इस लेख (CSS-Tricks) या इस लेख (DevOpera) का संदर्भ लें।