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

राहेल एंड्रयू से फ्लेक्सबॉक्स सीएसएस तकनीक की सुविधाओं पर प्रकाशनों की एक श्रृंखला ।

1. फ्लेक्सबॉक्स कंटेनर बनाते समय क्या होता है ।

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

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

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

CSS लेआउट के पूरे इतिहास में, दोनों कुल्हाड़ियों पर तत्वों को ठीक से संरेखित करने की क्षमता मुझे वास्तव में सबसे कठिन वेब डिज़ाइन समस्या लगती थी। यानी तत्वों और समूहों के तत्वों को सही ढंग से संरेखित करने की क्षमता फ्लेक्सबॉक्स की सबसे रोमांचक विशेषता में से कई के लिए थी जब यह पहली बार ब्राउज़रों में दिखाई दिया था। CSS में संरेखण केवल दो लाइनें बन गया:

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

गुण

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

• मुख्य अक्ष संरेखित करता है। अपने फ्लेक्स-दिशा के समान दिशा में संरेखण;
• संरेखित लंबवत अक्ष को संरेखित करता है। फ्लेक्स दिशा के लंबवत दिशा में संरेखण।

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

मुख्य अक्ष को औचित्य-सामग्री के साथ संरेखित करें

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

औचित्य-सामग्री संपत्ति का प्रारंभिक मूल्य फ्लेक्स-स्टार्ट है । इसलिए display: flex घोषणा display: flex सभी फ्लेक्स तत्व फ्लेक्स लाइन की शुरुआत में लाइन अप करते हैं। यदि आपके फ्लेक्स दिशा में मूल्य पंक्ति (लाइन) है और भाषा के पाठ को बाएं से दाएं, अंग्रेजी की तरह दर्ज करने की दिशा है, तो तत्व बाईं ओर से शुरू होंगे।

Ris_1। तत्व शुरू से ही लाइन में हैं।

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

Ris_2। पुनर्वितरण के लिए कोई जगह नहीं है

यदि हम औचित्य-सामग्री की संपत्ति को एक फ्लेक्स-एंड मूल्य देते हैं, तो सभी तत्व लाइन के अंत तक चले जाएंगे। नि: शुल्क स्थान अब शुरुआत में होगा।

Ris_3। तत्वों के अंत में लाइन।

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

Ris_4। तत्वों के बीच मुक्त स्थान वितरित किया जाता है

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

Ris_5। तत्वों के पास अब खुद के दोनों तरफ जगह है।

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

Ris_6। तत्वों को समान रूप से वितरित किया जाता है।

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

यदि आपकी फ्लेक्स दिशा एक स्तंभ है तो ये मान उसी तरह काम करते हैं। हालाँकि, आपके पास कॉलम में वितरण के लिए अतिरिक्त स्थान नहीं हो सकता है जब तक कि आप फ्लेक्स कंटेनर में ब्लॉक की ऊंचाई या आकार नहीं जोड़ते हैं, जैसा कि निम्नलिखित डेमो में है।

संरेखित सामग्री के साथ लंबवत अक्ष को संरेखित करें

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

फिर मैं किसी भी मान के साथ संरेखित सामग्री का उपयोग कर सकता हूं:

यदि मेरी फ्लेक्स-दिशा एक कॉलम है, तो एलाइन-कंटेंट काम करेगा, जैसा कि निम्नलिखित उदाहरण में है।

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

स्थान-सामग्री संपत्ति का संक्षिप्त रूप

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

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

संरेखित वस्तुओं के साथ लंबवत अक्ष को संरेखित करें

अब हम जानते हैं कि हम एक समूह के रूप में अपने फ्लेक्स तत्वों या हमारी फ्लेक्स लाइनों को सेट कर सकते हैं।

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

Ris_7। कंटेनर की ऊंचाई तीसरे तत्व द्वारा निर्धारित की जाती है

इसके बजाय, इसे फ्लेक्स कंटेनर में ऊंचाई जोड़कर परिभाषित किया जा सकता है:

Ris_8। ऊंचाई फ्लेक्स कंटेनर के आकार से निर्धारित होती है।

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

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

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

Ris_9। तत्व अनुप्रस्थ अक्ष की शुरुआत से जुड़े हैं

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

Ris_10। तत्व अनुप्रस्थ अक्ष के अंत में संरेखित होते हैं

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

Ris_11। तत्व अनुप्रस्थ अक्ष पर केंद्रित हैं

हम आधारभूत संरेखण भी कर सकते हैं। यह सुनिश्चित करता है कि पाठ की आधारभूत रेखाएँ संरेखित हैं, सामग्री के चारों ओर हाशिये नहीं।

Ris_12। बेसलाइन संरेखण

आप डेमो में इन मूल्यों की कोशिश कर सकते हैं:

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

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

आप किसी भी एकल फ्लेक्स आइटम की संरेखित-स्व संपत्ति का उपयोग अन्य फ्लेक्स आइटम के साथ फ्लेक्स लाइन के अंदर संरेखित करने के लिए भी कर सकते हैं।

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

कोई स्व-समतल क्यों नहीं है?

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

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

मुख्य अक्ष पर ऑटो-इंडेंट का उपयोग करना

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

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

मैं इस मेनू आइटम को लक्ष्य कर रहा हूं और इसे मार्जिन-लेफ्ट ऑटो दे रहा हूं। इसका मतलब यह है कि फ़ील्ड आइटम के बाईं ओर जितना संभव हो सके उतनी जगह पाने की कोशिश कर रही है, यह सभी तरह से दाईं ओर धकेलती है।

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

फॉलबैक संरेखण

प्रत्येक संरेखण विधि विस्तार से बैकअप आवंटन का वर्णन करती है, यह तब होता है जब अनुरोधित संरेखण को प्राप्त नहीं किया जा सकता है। उदाहरण के लिए, यदि आपके पास फ्लेक्स कंटेनर में केवल एक आइटम है और आप औचित्य-सामग्री का अनुरोध करते हैं : स्पेस-बीच , क्या होना चाहिए? इसका उत्तर यह है कि फ़ॉलबैक संरेखण फ्लेक्स-स्टार्ट का उपयोग करता है, और फ्लेक्स कंटेनर की शुरुआत में एक तत्व गठबंधन किया जाएगा। औचित्य-सामग्री के मामले में : अंतरिक्ष-चारों ओर , केंद्र में बैकअप संरेखण का उपयोग किया जाता है।

वर्तमान विनिर्देश में, आप बैकअप संरेखण सेटिंग्स नहीं बदल सकते। इसलिए, यदि आप फ्लेक्स-स्टार्ट के बजाय स्पेस-बीच के लिए फ़ॉलबैक विकल्प पसंद करते हैं, तो ऐसा करने का कोई तरीका नहीं है। लेकिन विनिर्देश में एक नोट है जो बताता है कि यह सुविधा भविष्य के स्तरों में शामिल हो सकती है।

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

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

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

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

Ris_13। असुरक्षित संरेखण आवश्यक संरेखण प्रदान करेगा, लेकिन डेटा हानि हो सकती है

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

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

Ris_14। सुरक्षित संरेखण डेटा हानि को रोकने की कोशिश करता है

इन कीवर्ड में अभी सीमित ब्राउज़र समर्थन है, हालांकि, वे बॉक्स अलाइन्मेंट विनिर्देश के माध्यम से फ्लेक्सबॉक्स में पेश किए गए अतिरिक्त नियंत्रण का सार प्रदर्शित करते हैं।

अंत में

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

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