आप सभी को Flexbox में संरेखण के बारे में जानना चाहिए

लेखक के बारे में : राहेल एंड्रयू न केवल स्मैशिंग पत्रिका के प्रधान संपादक हैं, बल्कि एक वेब डेवलपर, लेखक और वक्ता भी हैं। वह कई पुस्तकों के लेखक हैं, जिनमें द न्यू सीएसएस लेआउट , पर्च सामग्री प्रबंधन प्रणाली के डेवलपर्स में से एक है। वह अपनी वेबसाइट rachelandrew.co.uk पर व्यवसाय और प्रौद्योगिकी के बारे में लिखते हैं।

सारांश: इस लेख में हम फ्लेक्सबॉक्स में संरेखण गुणों और मुख्य और अनुप्रस्थ कुल्हाड़ियों पर संरेखण कैसे काम करते हैं पर कुछ बुनियादी नियम देखेंगे।

इस श्रृंखला के पहले लेख में , मैंने एक display: flex प्रॉपर्टी घोषित होने पर क्या होता है, इस बारे में बात की। अब आइए संरेखण गुणों को देखें और वे फ्लेक्सबॉक्स के साथ कैसे काम करते हैं। यदि आप कभी भ्रमित हुए हैं, तो align या justify , आशा है कि यह लेख बहुत कुछ स्पष्ट करेगा!

फ्लेक्सबॉक्स संरेखण इतिहास

CSS इतिहास में, दोनों अक्षों पर सही ढंग से संरेखित करना सबसे बड़ी चुनौती की तरह लग रहा था। फ्लेक्सबॉक्स में कई लोगों के लिए इस सुविधा का दिखना इस तकनीक का मुख्य लाभ बन गया है। संरेखण सीएसएस की दो लाइनों के लिए नीचे उबला हुआ।

संरेखण गुण अब पूरी तरह से बॉक्स संरेखण विनिर्देश में परिभाषित किए गए हैं । यह बताता है कि विभिन्न लेआउट में संरेखण कैसे काम करता है। इसका मतलब यह है कि सीएसएस ग्रिड में आप फ्लेक्सबॉक्स के समान गुणों का उपयोग कर सकते हैं - और भविष्य में अन्य लेआउट में भी। इसलिए, किसी भी नए Flexbox संरेखण विशेषता को बॉक्स संरेखण विनिर्देश में विस्तार से वर्णित किया जाएगा, और फ्लेक्सबॉक्स के अगले संस्करण में नहीं।

गुण

कई लोगों के लिए यह याद रखना मुश्किल है कि क्या उन गुणों का उपयोग करना है जो align- साथ शुरू align- या justify- । निम्नलिखित को याद रखना महत्वपूर्ण है:

• justify- मुख्य अक्ष पर संरेखण को उसी दिशा में करता है जैसे कि flex-direction ;
• align- flex-direction अक्ष संरेखण करता है।

यह वास्तव में मुख्य और अनुप्रस्थ कुल्हाड़ियों के संदर्भ में सोचने में मदद करता है, न कि क्षैतिज और ऊर्ध्वाधर। इससे कोई फर्क नहीं पड़ता कि अक्ष शारीरिक रूप से कैसे निर्देशित है।

मुख्य अक्ष संरेखण justify-content

आइए मुख्य अक्ष पर संरेखण के साथ शुरू करें। यह justify-content संपत्ति का उपयोग करके कार्यान्वित किया जाता है। यह संपत्ति सभी तत्वों को एक समूह के रूप में मानती है और उनके बीच अंतरिक्ष के वितरण को नियंत्रित करती है।

प्रारंभिक justify-content मूल्य flex-start । इसीलिए जब display: flex घोषणा की जाती display: flex सभी फ्लेक्स तत्व लाइन की शुरुआत में लाइन अप करते हैं। लेखन में, बाएं से दाएं, तत्वों को बाएं से समूहित किया जाता है।


कृपया ध्यान दें कि justify-content संपत्ति खाली स्थान होने पर ही एक दृश्य प्रभाव उत्पन्न करती है । इसलिए, यदि आपके तत्वों का सेट मुख्य अक्ष पर सभी स्थान रखता है, तो justify-content कुछ भी नहीं करेगी।


यदि justify-content flex-end justify-content है, तो सभी आइटम लाइन के अंत में चले जाएंगे। मुक्त स्थान अब शुरुआत में है।


ऐसी अन्य चीजें हैं जो आप इस स्थान के साथ कर सकते हैं। उदाहरण के लिए, justify-content: space-between का उपयोग करके हमारे तत्वों के बीच इसे वितरित करें justify-content: space-between । इस मामले में, पहला और अंतिम तत्व कंटेनर के सिरों पर रखा जाएगा, और पूरे स्थान को तत्वों के बीच समान रूप से विभाजित किया जाएगा।


हम justify-content: space-around का उपयोग करके स्पेस आवंटित कर सकते हैं। इस स्थिति में, उपलब्ध स्थान को समान भागों में विभाजित किया जाता है और तत्व के प्रत्येक पक्ष पर रखा जाता है।


नया justify-content मूल्य बॉक्स संरेखण विनिर्देश में पाया जा सकता है; यह Flexbox विनिर्देश में निर्दिष्ट नहीं है। यह मान space-evenly । इस मामले में, तत्वों को कंटेनर में समान रूप से वितरित किया जाता है, और अतिरिक्त स्थान समान रूप से तत्वों और दोनों पक्षों के बीच वितरित किया जाता है।



आप डेमो में सभी मूल्यों के साथ खेल सकते हैं।

मान ठीक उसी तरह से कार्य करते हैं, जैसे कि यदि flex-direction column लागू होता है। सच है, आपके पास वितरण के लिए कॉलम में खाली स्थान नहीं हो सकता है यदि आप कंटेनर की ऊंचाई या ब्लॉक-आकार नहीं जोड़ते हैं, जैसा कि इस डेमो में है ।

align-content साथ अक्षीय संरेखण

यदि कंटेनर में कई अक्ष और flex-wrap: wrap निर्दिष्ट किया गया है, तो आप align-content रिवर्स अक्ष पर लाइनों को संरेखित करने के लिए संरेखित align-content का उपयोग कर सकते हैं। लेकिन अतिरिक्त जगह की आवश्यकता है। इस प्रदर्शन में, अनुप्रस्थ अक्ष स्तंभ की दिशा में काम करता है, और मैंने संकेत दिया कि कंटेनर की ऊंचाई 60vh । चूंकि यह सभी तत्वों को प्रदर्शित करने के लिए आवश्यक से अधिक है, ऊर्ध्वाधर मुक्त स्थान दिखाई देता है।

फिर मैं किसी भी मान के साथ align-content लागू कर सकता हूं।

यदि column को flex-direction रूप column निर्दिष्ट किया गया है, तो निम्न उदाहरण में align-content काम करती है।

justify-content , हम स्ट्रिंग्स के एक समूह के साथ काम करते हैं और मुक्त स्थान आवंटित करते हैं।

place-content द्वारा संपत्ति

बॉक्स संरेखण विनिर्देश में, आप place-content संपत्ति पा सकते हैं। इस संपत्ति का उपयोग करने का मतलब है कि आप उसी समय justify-content और align-content justify-content सेट कर रहे हैं। पहला मूल्य align-content , दूसरा justify-content । यदि केवल एक मान निर्दिष्ट है, तो यह दोनों गुणों पर लागू होता है:

 .container { place-content: space-between stretch; } 

इसके अनुरूप:

 .container { align-content: space-between; justify-content: stretch; } 

और ऐसा कोड:

 .container { place-content: space-between; } 

निम्नलिखित के बराबर:

 .container { align-content: space-between; justify-content: space-between; } 

align-items साथ अक्षीय संरेखण

अब हम जानते हैं कि आप समूह के रूप में तत्वों या पंक्तियों के समूह को संरेखित कर सकते हैं। हालांकि, अनुप्रस्थ अक्ष पर एक दूसरे के साथ तत्वों को संरेखित करने का एक और तरीका है। कंटेनर की एक ऊंचाई है, जो उच्चतम तत्व की ऊंचाई से निर्धारित होती है।


वैकल्पिक रूप से, इसे कंटेनर में height संपत्ति द्वारा परिभाषित किया जा सकता है:


आइटम को सबसे बड़ी वस्तु के आकार तक क्यों बढ़ाया जाता है - इसका कारण यह है कि align-items पैरामीटर के लिए प्रारंभिक मूल्य stretch । इस दिशा में तत्वों को अनुप्रस्थ अक्ष के साथ बढ़ाया जाता है।

ध्यान दें कि एक बहु-पंक्ति कंटेनर में, प्रत्येक पंक्ति एक नए कंटेनर की तरह कार्य करती है। इस पंक्ति में उच्चतम तत्व इस पंक्ति में सभी तत्वों का आकार निर्धारित करेगा।

प्रारंभिक stretch मूल्य के अलावा, आप align-items को flex-start सेट कर सकते हैं, जिस स्थिति में वे कंटेनर की शुरुआत में संरेखित होते हैं और अब ऊंचाई में नहीं खिंचते हैं।


flex-end मूल्य उन्हें अनुप्रस्थ अक्ष के साथ कंटेनर के अंत तक ले जाता है।


यदि आप center मूल्य का उपयोग करते center , तो तत्व एक दूसरे के सापेक्ष केंद्रित होते हैं:


हम उन्हें आधार रेखा से भी जोड़ सकते हैं। यह सुनिश्चित करता है कि पाठ एक आधार पर, पाठ के आसपास के क्षेत्रों के संरेखण के विपरीत, एक आधार पर संरेखित हो।


इन सभी विकल्पों को डेमो में आज़माया जा सकता है।

संरेखण align-self साथ व्यक्तिगत संरेखण

align-items गुण एक ही समय में सभी तत्वों का संरेखण सेट करता है। वास्तव में, यह समूह के सभी तत्वों के लिए align-self मूल्य निर्धारित करता है। आप किसी भी एकल तत्व को स्ट्रिंग के भीतर और अन्य तत्वों के संबंध में align-self करने के लिए align-self संपत्ति का उपयोग कर सकते हैं।

निम्नलिखित उदाहरण पूरे समूह को केंद्र में रखने के लिए कंटेनर में align-items का उपयोग करता है, लेकिन पहले और अंतिम आइटम के लिए भी align-self ।

क्यों नहीं justify-self ?

यह प्रश्न अक्सर उठता है कि मुख्य अक्ष के साथ एक तत्व या तत्वों के समूह को संरेखित करना असंभव क्यों है। मुख्य अक्ष पर संरेखण के लिए -self में कोई- -self संपत्ति क्यों है? यदि आप जगह आवंटित करने के तरीके के रूप में justify-content और align-content justify-content परिचय justify-content , तो उत्तर अधिक स्पष्ट हो जाता है। हम एक समूह के रूप में तत्वों से निपटते हैं और एक निश्चित तरीके से मुक्त स्थान रखते हैं: या तो शुरुआत में या समूह के अंत में, या तत्वों के बीच।

यह सोचने के लिए भी उपयोगी हो सकता है कि सीएसएस ग्रिड लेआउट में justify-content और align-content काम करती है। ग्रिड में, इन गुणों का उपयोग ग्रिड पटरियों के बीच एक ग्रिड कंटेनर में मुफ्त स्थान वितरित करने के लिए किया जाता है। यहां हम पटरियों का एक समूह भी लेते हैं - और इन गुणों की मदद से हम उनके बीच मुक्त स्थान वितरित करते हैं। चूंकि हम ग्रिड और फ्लेक्सबॉक्स दोनों में एक समूह में काम करते हैं, इसलिए हम एक अलग तत्व नहीं ले सकते हैं और इसके साथ कुछ और कर सकते हैं। हालांकि, लेआउट डिज़ाइन प्राप्त करने का एक तरीका है जो कोडर चाहते हैं जब वे मुख्य अक्ष पर self संपत्ति के बारे में बात करते हैं। यह स्वचालित क्षेत्रों का उपयोग है।

मुख्य अक्ष पर स्वचालित फ़ील्ड का उपयोग करना

यदि आपने कभी सीएसएस में एक ब्लॉक केंद्रित किया है (उदाहरण के लिए, मुख्य पृष्ठ की सामग्री के लिए लपेटकर, auto में बाईं और दाईं ओर फ़ील्ड सेट करना), तो आपके पास पहले से ही स्वचालित फ़ील्ड के साथ कुछ अनुभव है। खेतों के लिए auto मूल्य निर्धारित दिशा में अधिकतम स्थान को भरता है। ब्लॉक को केंद्र में रखने के लिए, हम बाएँ और दाएँ फ़ील्ड को auto सेट करते हैं: उनमें से प्रत्येक जितना संभव हो उतना स्थान लेने की कोशिश करता है, और इसलिए हमारे ब्लॉक को केंद्र में रखता है।

ऑटो फ़ील्ड फ्लेक्सबॉक्स में व्यक्तिगत तत्वों या तत्वों के समूहों को मुख्य अक्ष पर संरेखित करने के लिए बहुत अच्छी तरह से काम करते हैं। निम्नलिखित उदाहरण एक विशिष्ट मामले को दर्शाता है। एक नेविगेशन बार है, तत्वों को एक स्ट्रिंग के रूप में प्रदर्शित किया जाता है और प्रारंभिक मूल्य justify-content: start उपयोग करते हैं justify-content: start । मैं चाहता हूं कि अंतिम आइटम लाइन के अंत में दूसरों से अलग-अलग प्रदर्शित किया जाए - बशर्ते कि लाइन में इसके लिए पर्याप्त स्थान हो।

हम इस तत्व को लेते हैं और margin-left संपत्ति को auto सेट करते हैं। इसका मतलब यह है कि क्षेत्र तत्व के बाईं ओर जितना संभव हो उतना स्थान पाने की कोशिश कर रहा है, अर्थात तत्व को सही सीमा पर धकेल दिया जाता है।



यदि आप मुख्य अक्ष पर स्वचालित फ़ील्ड का उपयोग करते हैं, तो justify-content काम करना बंद कर देगी, क्योंकि स्वचालित फ़ील्ड संपूर्ण स्थान पर कब्जा कर लेंगे जो अन्यथा justify-content का उपयोग करके आवंटित किया जाएगा।

अतिरिक्त संरेखण

प्रत्येक संरेखण विधि के लिए, एक वापसी का वर्णन किया गया है - यदि दिया संरेखण संभव नहीं है तो क्या होगा। उदाहरण के लिए, यदि आपके पास कंटेनर में केवल एक आइटम है और आप justify-content: space-between निर्दिष्ट करते हैं justify-content: space-between , क्या होना चाहिए? इस मामले में, स्पेयर flex-start संरेखण लागू किया जाता है - कंटेनर की शुरुआत में एक तत्व गठबंधन किया जाएगा। justify-content: space-around के मामले में justify-content: space-around , एक अतिरिक्त center संरेखण का उपयोग किया जाता है।

वर्तमान विनिर्देश में, आप अतिरिक्त संरेखण नहीं बदल सकते। विनिर्देशों के लिए एक नोट है , जो भविष्य के संस्करणों में मनमाने ढंग से कमबैक को निर्दिष्ट करने की अनुमति देता है।

सुरक्षित और असुरक्षित संरेखण

बॉक्स संरेखण विनिर्देश के लिए एक हालिया जोड़ सुरक्षित और असुरक्षित खोजशब्दों का उपयोग करके सुरक्षित और असुरक्षित संरेखण की अवधारणा है।

निम्नलिखित कोड में, अंतिम तत्व कंटेनर के लिए बहुत चौड़ा है, और असुरक्षित संरेखण और पृष्ठ के बाईं ओर एक लचीले कंटेनर के साथ, तत्व काट दिया जाता है क्योंकि अतिप्रवाह पृष्ठ सीमाओं से परे जाता है।

 .container { display: flex; flex-direction: column; width: 100px; align-items: unsafe center; } .item:last-child { width: 200px; } 

सुरक्षित संरेखण दूसरी तरफ अतिप्रवाह को स्थानांतरित करके डेटा हानि को रोकता है।

 .container { display: flex; flex-direction: column; width: 100px; align-items: safe center; } .item:last-child { width: 200px; } 

ये कीवर्ड अभी तक सभी ब्राउज़रों द्वारा समर्थित नहीं हैं, लेकिन प्रदर्शित करता है कि कैसे बॉक्स संरेखण विनिर्देशों Flexbox पर नियंत्रण जोड़ते हैं।

निष्कर्ष

संरेखण गुण फ्लेक्सबॉक्स में एक सूची के साथ शुरू हुए, लेकिन अब उनकी अपनी विशिष्टताएं हैं और अन्य लेआउट संदर्भों पर लागू होती हैं। फ्लेक्सबॉक्स में उनके उपयोग को याद रखने में मदद करने के लिए यहां कुछ प्रमुख तथ्य दिए गए हैं:

• justify- मुख्य कुल्हाड़ियों के लिए, और अनुप्रस्थ के लिए align- करें;
• align-content और justify-content मुक्त स्थान justify-content आवश्यकता है;
• समूह के तत्वों में align-content और justify-content गुण उनके बीच के स्थान को वितरित करते हैं। आप एक व्यक्तिगत तत्व के संरेखण को निर्दिष्ट नहीं कर सकते क्योंकि स्वयं-संपत्ति गायब है;
• यदि आप एक तत्व को संरेखित करना चाहते हैं या मुख्य अक्ष के साथ एक समूह को विभाजित करते हैं, तो स्वचालित फ़ील्ड का उपयोग करें;
• align-items पूरे समूह के लिए एक ही align-self गुण सेट करता है। समूह के बच्चे के लिए अपने मूल्य को व्यक्तिगत रूप से निर्धारित करने के लिए align-self करें।