सीएसएस फ्लेक्सबॉक्स (लचीला बॉक्स लेआउट मॉड्यूल)- लचीला कंटेनर लेआउट मॉड्यूल - एक अक्ष के विचार के आधार पर तत्वों को व्यवस्थित करने का एक तरीका है।
फ्लेक्सबॉक्स में शामिल हैं लचीला कंटेनरऔर लचीली वस्तुएं. लचीले तत्वों को एक पंक्ति या स्तंभ में व्यवस्थित किया जा सकता है, और शेष खाली स्थान को उनके बीच विभिन्न तरीकों से वितरित किया जाता है।
फ्लेक्सबॉक्स मॉड्यूल आपको निम्नलिखित कार्यों को हल करने की अनुमति देता है:
- तत्वों को चार दिशाओं में से एक में व्यवस्थित करें: बाएँ से दाएँ, दाएँ से बाएँ, ऊपर से नीचे, या नीचे से ऊपर।
- तत्वों के प्रदर्शन क्रम को ओवरराइड करें।
- तत्वों को स्वचालित रूप से आकार दें ताकि वे उपलब्ध स्थान में फिट हो जाएं।
- समस्या को क्षैतिज और ऊर्ध्वाधर केन्द्रीकरण से हल करें।
- वस्तुओं को बिना ओवरफ्लो किए कंटेनर के अंदर ले जाएं।
- समान ऊंचाई के कॉलम बनाएं.
- क्रिएट को पेज के नीचे दबाएँ।
फ्लेक्सबॉक्स विशिष्ट समस्याओं को हल करता है - एक-आयामी लेआउट बनाना, उदाहरण के लिए, एक नेविगेशन बार, क्योंकि फ्लेक्स तत्वों को केवल एक अक्ष के साथ रखा जा सकता है।
आप फिलिप वाल्टन के लेख में वर्तमान मॉड्यूल समस्याओं और उनके लिए क्रॉस-ब्राउज़र समाधानों की एक सूची पढ़ सकते हैं।
फ्लेक्सबॉक्स क्या है
ब्राउज़र समर्थन
अर्थात: 11.0, 10.0 -एमएस-
फ़ायरफ़ॉक्स: 28.0, 18.0 -मोज़-
क्रोम: 29.0, 21.0 -वेबकिट-
सफारी: 6.1-वेबकिट-
ओपेरा: 12.1-वेबकिट-
आईओएस सफारी: 7.0 -वेबकिट-
ऑपेरा मिनी: 8
एंड्रॉइड ब्राउज़र: 4.4, 4.1 -वेबकिट-
एंड्रॉइड के लिए क्रोम: 44
1. बुनियादी अवधारणाएँ
चावल। 1. फ्लेक्सबॉक्स मॉडल फ्लेक्सबॉक्स मॉड्यूल का वर्णन करने के लिए शब्दों के एक विशिष्ट सेट का उपयोग किया जाता है। फ्लेक्स-फ्लो मान और रिकॉर्डिंग मोड इन शब्दों के भौतिक दिशाओं के पत्राचार को निर्धारित करते हैं: ऊपर / दाएं / नीचे / बाएं, अक्ष: ऊर्ध्वाधर / क्षैतिज, और आयाम: चौड़ाई / ऊंचाई।
मुख्य धुरी- वह अक्ष जिसके अनुदिश लचीले तत्व रखे गए हैं। यह मुख्य आयाम तक फैला हुआ है।
मुख्य प्रारंभ और मुख्य अंत- लाइनें जो फ्लेक्स कंटेनर के आरंभ और अंत पक्षों को परिभाषित करती हैं, जिसके सापेक्ष फ्लेक्स तत्व बिछाए जाते हैं (मुख्य प्रारंभ से मुख्य अंत की ओर)।
मुख्य आकार) - फ्लेक्स कंटेनर या फ्लेक्स आइटम की चौड़ाई या ऊंचाई, इस पर निर्भर करती है कि उनमें से कौन मुख्य आयाम में है, फ्लेक्स कंटेनर या फ्लेक्स आइटम का मुख्य आकार निर्धारित करता है।
क्रॉस अक्ष- मुख्य अक्ष के लंबवत अक्ष। यह अनुप्रस्थ आयाम में फैला हुआ है।
क्रॉस प्रारंभ और क्रॉस अंत- रेखाएं जो अनुप्रस्थ अक्ष के शुरुआती और अंतिम पक्षों को परिभाषित करती हैं, जिसके सापेक्ष लचीले तत्व बिछाए जाते हैं।
क्रॉस साइज- फ्लेक्स कंटेनर या फ्लेक्स आइटम की चौड़ाई या ऊंचाई, जो भी क्रॉस आयाम में है, उनका क्रॉस आयाम है।
चावल। 2. पंक्ति और स्तंभ मोड 2. फ्लेक्स कंटेनर
एक फ्लेक्स कंटेनर अपनी सामग्री के लिए एक नया लचीला स्वरूपण संदर्भ सेट करता है। फ्लेक्स कंटेनर एक ब्लॉक कंटेनर नहीं है, इसलिए सीएसएस गुण जैसे फ्लोट, क्लियर, वर्टिकल-एलाइन चाइल्ड तत्वों के लिए काम नहीं करते हैं। साथ ही, फ्लेक्स कंटेनर column-* गुणों से प्रभावित नहीं होता है जो टेक्स्ट और छद्म-elements::first-line और::first-letter में कॉलम बनाते हैं।
फ्लेक्सबॉक्स मार्कअप मॉडल अपने भीतर चाइल्ड ब्लॉक वाले पैरेंट HTML तत्व की सीएसएस डिस्प्ले प्रॉपर्टी के एक विशिष्ट मूल्य से जुड़ा है। इस मॉडल का उपयोग करके तत्वों को नियंत्रित करने के लिए, आपको डिस्प्ले प्रॉपर्टी को निम्नानुसार सेट करना होगा:
फ्लेक्स-कंटेनर ( /*एक ब्लॉक-स्तरीय फ्लेक्स कंटेनर बनाता है*/ डिस्प्ले: -वेबकिट-फ्लेक्स; डिस्प्ले: फ्लेक्स; ) .फ्लेक्स-कंटेनर ( /*एक लाइन-स्तरीय फ्लेक्स कंटेनर बनाता है*/ डिस्प्ले: -वेबकिट-इनलाइन- फ्लेक्स; डिस्प्ले: इनलाइन-फ्लेक्स)
इन संपत्ति मूल्यों को सेट करने के बाद, प्रत्येक चाइल्ड तत्व स्वचालित रूप से एक फ्लेक्स तत्व बन जाता है, जो एक पंक्ति में (मुख्य अक्ष के साथ) पंक्तिबद्ध होता है। इस मामले में, ब्लॉक और इनलाइन चाइल्ड तत्व समान व्यवहार करते हैं, अर्थात। तत्व के आंतरिक मार्जिन और सीमाओं को ध्यान में रखते हुए, ब्लॉक की चौड़ाई उनकी सामग्री की चौड़ाई के बराबर है।
चावल। 3. फ्लेक्सबॉक्स मॉडल में तत्वों को संरेखित करना यदि मूल ब्लॉक में बिना रैपर के पाठ या चित्र हैं, तो वे अनाम फ्लेक्स आइटम बन जाते हैं। टेक्स्ट को कंटेनर ब्लॉक के शीर्ष किनारे पर संरेखित किया जाता है, और छवि की ऊंचाई बन जाती है समान ऊंचाईब्लॉक, यानी यह विकृत है.
3. लचीले तत्व
फ्लेक्स आइटम ऐसे ब्लॉक होते हैं जो प्रवाह में फ्लेक्स कंटेनर की सामग्री का प्रतिनिधित्व करते हैं। फ्लेक्स कंटेनर अपनी सामग्री के लिए एक नया स्वरूपण संदर्भ स्थापित करता है, जो निम्नलिखित सुविधाओं का कारण बनता है:
- फ्लेक्स आइटम के लिए, उनका प्रदर्शन गुण मान लॉक कर दिया गया है। प्रदर्शन मूल्य: इनलाइन-ब्लॉक; और डिस्प्ले: टेबल-सेल; डिस्प्ले में मूल्यांकन किया गया: ब्लॉक; .
- आइटमों के बीच का सफेद स्थान गायब हो जाता है: यह अपना स्वयं का फ्लेक्स आइटम नहीं बनता है, भले ही इंटरआइटम टेक्स्ट किसी अज्ञात फ्लेक्स आइटम में लपेटा गया हो। एक अनाम फ्लेक्स आइटम की सामग्री को स्टाइल नहीं किया जा सकता है, लेकिन फ्लेक्स कंटेनर से शैलियाँ (जैसे फ़ॉन्ट विकल्प) प्राप्त होंगी।
- बिल्कुल स्थित फ्लेक्स तत्व फ्लेक्स लेआउट लेआउट में भाग नहीं लेता है।
- आसन्न फ्लेक्स तत्वों का मार्जिन ढहता नहीं है।
- प्रतिशत मार्जिन और पैडिंग मानों की गणना उनके युक्त ब्लॉक के आंतरिक आकार से की जाती है।
- मार्जिन: ऑटो; संबंधित आयाम में अतिरिक्त स्थान को अवशोषित करते हुए विस्तार करें। उनका उपयोग आसन्न फ्लेक्स वस्तुओं को संरेखित करने या धक्का देने के लिए किया जा सकता है।
- फ्लेक्स आइटम का डिफ़ॉल्ट स्वचालित न्यूनतम आकार इसकी सामग्री का न्यूनतम आकार है, यानी न्यूनतम-चौड़ाई: ऑटो; . स्क्रॉल करने योग्य कंटेनरों के लिए, स्वचालित न्यूनतम आकार आमतौर पर शून्य होता है।
4. फ्लेक्स आइटम डिस्प्ले ऑर्डर और ओरिएंटेशन
फ्लेक्स कंटेनर की सामग्री को किसी भी दिशा में और किसी भी क्रम में रखा जा सकता है (कंटेनर के भीतर फ्लेक्स आइटम को पुनर्व्यवस्थित करने से केवल दृश्य प्रतिपादन प्रभावित होता है)।
4.1. मुख्य अक्ष दिशा: फ्लेक्स-दिशा
संपत्ति फ्लेक्स कंटेनर को संदर्भित करती है। वर्तमान लेखन मोड के अनुसार, मुख्य अक्ष की दिशा को नियंत्रित करता है जिसके साथ फ्लेक्स आइटम को स्टैक किया जाता है। विरासत में नहीं मिला.
| फ्लेक्स-दिशा | |
|---|---|
| मान: | |
| पंक्ति | डिफ़ॉल्ट मान बाएँ से दाएँ (rtl में, दाएँ से बाएँ) है। फ्लेक्स तत्वों को एक पंक्ति में रखा गया है। मुख्य अक्ष दिशा की शुरुआत (मुख्य-प्रारंभ) और अंत (मुख्य-अंत) लाइन अक्ष (इनलाइन-अक्ष) के प्रारंभ (इनलाइन-स्टार्ट) और अंत (इनलाइन-एंड) के अनुरूप होती है। |
| पंक्ति-विपरीत | दिशा दाएं से बाएं (आरटीएल में बाएं से दाएं) है। फ्लेक्स तत्वों को कंटेनर के दाहिने किनारे (आरटीएल में - बाएं) के सापेक्ष एक पंक्ति में बिछाया जाता है। |
| स्तंभ | ऊपर से नीचे तक दिशा. फ्लेक्स तत्वों को एक कॉलम में रखा गया है। |
| कॉलम-रिवर्स | नीचे से ऊपर तक उल्टे क्रम में तत्वों वाला एक स्तंभ। |
| प्रारंभिक | |
| इनहेरिट | |
चावल। 4. बाएं से दाएं भाषाओं के लिए फ्लेक्स-दिशा संपत्ति वाक्य - विन्यास
फ्लेक्स-कंटेनर (डिस्प्ले: -वेबकिट-फ्लेक्स; -वेबकिट-फ्लेक्स-दिशा: पंक्ति-रिवर्स; डिस्प्ले: फ्लेक्स; फ्लेक्स-दिशा: पंक्ति-रिवर्स;)
4.2. मल्टी-लाइन फ्लेक्स कंटेनर का प्रबंधन: फ्लेक्स-रैप
संपत्ति यह निर्धारित करती है कि फ्लेक्स कंटेनर सिंगल-लाइन या मल्टी-लाइन होगा, और क्रॉस अक्ष की दिशा भी निर्धारित करता है, जो उस दिशा को निर्धारित करता है जिसमें फ्लेक्स कंटेनर की नई लाइनें रखी जाएंगी।
डिफ़ॉल्ट रूप से, फ्लेक्स आइटम मुख्य अक्ष के साथ एक पंक्ति में रखे जाते हैं। यदि वे ओवरफ्लो हो जाते हैं, तो वे फ्लेक्स कंटेनर के बाउंडिंग बॉक्स से आगे बढ़ जाएंगे। संपत्ति विरासत में नहीं मिली है.
चावल। 5. एलटीआर भाषाओं के लिए फ्लेक्स-रैप प्रॉपर्टी का उपयोग करके मल्टी-लाइन नियंत्रण वाक्य - विन्यास
फ्लेक्स-कंटेनर (डिस्प्ले: -वेबकिट-फ्लेक्स; -वेबकिट-फ्लेक्स-रैप: रैप; डिस्प्ले: फ्लेक्स; फ्लेक्स-रैप: रैप;)
4.3. दिशा और मल्टी-लाइन का संक्षिप्त सारांश: फ्लेक्स-फ्लो
संपत्ति आपको मुख्य और अनुप्रस्थ अक्षों की दिशाओं को परिभाषित करने की अनुमति देती है, साथ ही यदि आवश्यक हो, तो कई लाइनों पर फ्लेक्स तत्वों को स्थानांतरित करने की क्षमता भी देती है। यह फ्लेक्स-दिशा और फ्लेक्स-रैप गुणों के लिए एक आशुलिपि है। डिफ़ॉल्ट मान फ्लेक्स-फ़्लो: पंक्ति अब्रैप; . संपत्ति विरासत में नहीं मिली है.
वाक्य - विन्यास
फ्लेक्स-कंटेनर (डिस्प्ले: -वेबकिट-फ्लेक्स; -वेबकिट-फ्लेक्स-फ्लो: रो रैप; डिस्प्ले: फ्लेक्स; फ्लेक्स-फ्लो: रो रैप;)
4.4. फ्लेक्स आइटम का प्रदर्शन क्रम: ऑर्डर
संपत्ति उस क्रम को परिभाषित करती है जिसमें फ्लेक्स आइटम प्रदर्शित होते हैं और फ्लेक्स कंटेनर के भीतर व्यवस्थित होते हैं। फ्लेक्स आइटम पर लागू होता है. संपत्ति विरासत में नहीं मिली है.
प्रारंभ में सभी फ्लेक्स आइटमों का क्रम है: 0; . जब आप किसी तत्व के लिए -1 का मान निर्दिष्ट करते हैं, तो इसे समयरेखा की शुरुआत में ले जाया जाता है, और 1 का मान अंत में ले जाया जाता है। यदि एकाधिक फ्लेक्स आइटम का ऑर्डर मूल्य समान है, तो उन्हें मूल ऑर्डर के अनुसार प्रस्तुत किया जाएगा।
वाक्य - विन्यास
फ्लेक्स-कंटेनर (डिस्प्ले: -वेबकिट-फ्लेक्स; डिस्प्ले: फ्लेक्स; ) .फ्लेक्स-आइटम (-वेबकिट-ऑर्डर: 1; ऑर्डर: 1;) 
चावल। 6. फ्लेक्स आइटम का प्रदर्शन क्रम
5. लचीले तत्वों का लचीलापन
फ्लेक्स लेआउट का परिभाषित पहलू मुख्य आयाम में उपलब्ध स्थान को भरने के लिए फ्लेक्स आइटमों को "फ्लेक्स" करने, उनकी चौड़ाई/ऊंचाई (मुख्य अक्ष पर किस आकार के आधार पर) को बदलने की क्षमता है। यह फ्लेक्स प्रॉपर्टी का उपयोग करके किया जाता है। एक फ्लेक्स कंटेनर कंटेनर को भरने के लिए अपने बच्चों के बीच खाली जगह (उनके फ्लेक्स-ग्रोव अनुपात के आनुपातिक) वितरित करता है, या ओवरफ्लो को रोकने के लिए उन्हें सिकोड़ता है (उनके फ्लेक्स-सिकोड़ अनुपात के आनुपातिक)।
एक फ्लेक्स तत्व पूरी तरह से "अनम्य" होगा यदि उसके फ्लेक्स-ग्रो और फ्लेक्स-सिकुड़न मान शून्य हैं, और अन्यथा "लचीला" होगा।
5.1. एक गुण के साथ लचीले आयाम सेट करना: फ्लेक्स
यह संपत्ति फ्लेक्स-ग्रो, फ्लेक्स-श्रिंक और फ्लेक्स-बेस गुणों के लिए शॉर्टहैंड है। डिफ़ॉल्ट मान: फ्लेक्स: 0 1 ऑटो; . आप एक या तीनों संपत्ति मूल्य निर्दिष्ट कर सकते हैं। संपत्ति विरासत में नहीं मिली है.
वाक्य - विन्यास
फ्लेक्स-कंटेनर (डिस्प्ले: -वेबकिट-फ्लेक्स; डिस्प्ले: फ्लेक्स; ) .फ्लेक्स-आइटम (-वेबकिट-फ्लेक्स: 3 1 100पीएक्स; -एमएस-फ्लेक्स: 3 1 100पीएक्स; फ्लेक्स: 3 1 100पीएक्स;)
5.2. विकास कारक: फ्लेक्स-ग्रो
संपत्ति सकारात्मक मुक्त स्थान वितरित करते समय फ्लेक्स कंटेनर में अन्य फ्लेक्स तत्वों के सापेक्ष एक फ्लेक्स तत्व की वृद्धि दर निर्धारित करती है। यदि किसी पंक्ति में फ्लेक्स आइटम के फ्लेक्स-ग्रो मानों का योग 1 से कम है, तो वे 100% से कम खाली स्थान लेते हैं। संपत्ति विरासत में नहीं मिली है.
चावल। 7. फ्लेक्स-ग्रो के साथ नेविगेशन बार स्पेस प्रबंधित करें वाक्य - विन्यास
फ्लेक्स-कंटेनर (डिस्प्ले: -वेबकिट-फ्लेक्स; डिस्प्ले: फ्लेक्स; ) .फ्लेक्स-आइटम (-वेबकिट-फ्लेक्स-ग्रो: 3; फ्लेक्स-ग्रो: 3;)
5.3. संपीड़न अनुपात: फ्लेक्स-सिकुड़ना
नकारात्मक मुक्त स्थान वितरित करते समय संपत्ति अन्य फ्लेक्स आइटम के सापेक्ष एक फ्लेक्स आइटम के संपीड़न अनुपात को निर्दिष्ट करती है। फ्लेक्स-आधार आकार से गुणा किया गया। आइटम कितना सिकुड़ सकता है, इसके अनुपात में नकारात्मक स्थान आवंटित किया जाता है, इसलिए, उदाहरण के लिए, एक छोटा फ्लेक्स आइटम तब तक शून्य तक नहीं सिकुड़ेगा जब तक कि एक बड़ा फ्लेक्स आइटम स्पष्ट रूप से सिकुड़ न जाए। संपत्ति विरासत में नहीं मिली है.
चावल। 8. एक पंक्ति में फ्लेक्स आइटम को संकीर्ण करना वाक्य - विन्यास
फ्लेक्स-कंटेनर (डिस्प्ले: -वेबकिट-फ्लेक्स; डिस्प्ले: फ्लेक्स; ) .फ्लेक्स-आइटम (-वेबकिट-फ्लेक्स-श्रिंक: 3; फ्लेक्स-श्रिंक: 3;)
5.4. मूल आकार: फ्लेक्स-आधार
प्रॉपर्टी फ्लेक्स कारकों के अनुसार खाली स्थान आवंटित करने से पहले फ्लेक्स आइटम का प्रारंभिक आधार आकार निर्धारित करती है। ऑटो और सामग्री को छोड़कर सभी मानों के लिए, बेस फ्लेक्स आकार को क्षैतिज लेखन मोड में चौड़ाई के समान परिभाषित किया गया है। प्रतिशत मान फ्लेक्स कंटेनर के आकार के सापेक्ष परिभाषित किए जाते हैं, और यदि कोई आकार निर्दिष्ट नहीं है, तो फ्लेक्स-आधार के लिए उपयोग किया जाने वाला मान इसकी सामग्री के आयाम हैं। विरासत में नहीं मिला.
वाक्य - विन्यास
फ्लेक्स-कंटेनर (डिस्प्ले: -वेबकिट-फ्लेक्स; डिस्प्ले: फ्लेक्स; ) .फ्लेक्स-आइटम (-वेबकिट-फ्लेक्स-आधार: 100px; फ्लेक्स-आधार: 100px;)
6. संरेखण
6.1. मुख्य अक्ष संरेखण: औचित्य-सामग्री
संपत्ति फ्लेक्स आइटम को फ्लेक्स कंटेनर के मुख्य अक्ष के साथ संरेखित करती है, फ्लेक्स आइटम द्वारा खाली स्थान को वितरित करती है। जब किसी आइटम को फ्लेक्स कंटेनर में परिवर्तित किया जाता है, तो फ्लेक्स आइटम को डिफ़ॉल्ट रूप से एक साथ समूहीकृत किया जाता है (जब तक कि उनके पास मार्जिन सेट न हो)। गणना के बाद अंतराल जोड़े जाते हैं मार्जिन मानऔर फ्लेक्स-ग्रो। यदि किसी तत्व में गैर-शून्य फ्लेक्स-ग्रो या मार्जिन है: ऑटो; , संपत्ति पर कोई प्रभाव नहीं पड़ेगा. संपत्ति विरासत में नहीं मिली है.
| मान: | |
| फ्लेक्स-स्टार्ट | डिफ़ॉल्ट मान। फ्लेक्स तत्वों को फ्लेक्स कंटेनर की शुरुआती लाइन से शुरू होने वाली दिशा में बिछाया जाता है। |
| फ्लेक्स-एंड | फ्लेक्स आइटम को फ्लेक्स कंटेनर की अंतिम पंक्ति से दिशा में बिछाया जाता है। |
| केंद्र | फ्लेक्स आइटम फ्लेक्स कंटेनर के केंद्र में संरेखित होते हैं। |
| बीच का स्थान | फ्लेक्स तत्वों को लाइन के साथ समान रूप से वितरित किया जाता है। पहले फ्लेक्स आइटम को स्टार्ट लाइन के किनारे के साथ फ्लश में रखा जाता है, अंतिम फ्लेक्स आइटम को अंतिम लाइन के किनारे के साथ फ्लश में रखा जाता है, और लाइन पर शेष फ्लेक्स आइटम को दूरी पर रखा जाता है ताकि किसी भी दो आसन्न आइटम के बीच की दूरी हो जो उसी। यदि शेष खाली स्थान नकारात्मक है या प्रति पंक्ति केवल एक फ्लेक्स आइटम है, तो यह मान फ्लेक्स-स्टार्ट पैरामीटर के समान है। |
| अंतरिक्ष-चारों ओर | लाइन पर फ्लेक्स आइटम वितरित किए जाते हैं ताकि किसी भी दो आसन्न फ्लेक्स आइटम के बीच की दूरी समान हो, और पहले/अंतिम फ्लेक्स आइटम और फ्लेक्स कंटेनर के किनारों के बीच की दूरी फ्लेक्स आइटम के बीच की दूरी की आधी हो। |
| प्रारंभिक | संपत्ति मान को डिफ़ॉल्ट मान पर सेट करता है। |
| इनहेरिट | से संपत्ति का मूल्य विरासत में मिलता है मूल तत्व. |
चावल। 9. justify-content संपत्ति का उपयोग करके तत्वों को संरेखित करना और खाली स्थान वितरित करना वाक्य - विन्यास
फ्लेक्स-कंटेनर (डिस्प्ले: -वेबकिट-फ्लेक्स; -वेबकिट-जस्टिफाई-कंटेंट: फ्लेक्स-स्टार्ट; डिस्प्ले: फ्लेक्स; जस्टिफाई-कंटेंट: फ्लेक्स-स्टार्ट;)
6.2. क्रॉस अक्ष संरेखण: संरेखित-आइटम और संरेखित-स्वयं
फ्लेक्स तत्वों को फ्लेक्स कंटेनर की वर्तमान लाइन के अनुप्रस्थ अक्ष के साथ संरेखित किया जा सकता है। संरेखण-आइटम अनाम फ्लेक्स आइटम सहित सभी फ्लेक्स कंटेनर आइटम के लिए संरेखण सेट करता है। एलाइन-सेल्फ आपको अलग-अलग फ्लेक्स आइटम के लिए इस एलाइनमेंट को ओवरराइड करने की अनुमति देता है। यदि किसी फ्लेक्स तत्व का क्रॉस मार्जिन ऑटो पर सेट है, तो एलाइन-सेल्फ का कोई प्रभाव नहीं पड़ता है।
6.2.1. संरेखित-आइटम
संपत्ति अनुप्रस्थ अक्ष के साथ अनाम फ्लेक्स तत्वों सहित फ्लेक्स तत्वों को संरेखित करती है। विरासत में नहीं मिला.
| मान: | |
| फ्लेक्स-स्टार्ट | |
| फ्लेक्स-एंड | |
| केंद्र | |
| आधारभूत | संरेखण में शामिल सभी फ्लेक्स आइटमों की आधार रेखाएं समान हैं। |
| खींचना | |
| प्रारंभिक | संपत्ति मान को डिफ़ॉल्ट मान पर सेट करता है। |
| इनहेरिट | मूल तत्व से संपत्ति का मूल्य प्राप्त होता है। |
चावल। 10. एक कंटेनर में तत्वों को लंबवत रूप से संरेखित करना वाक्य - विन्यास
फ्लेक्स-कंटेनर (डिस्प्ले: -वेबकिट-फ्लेक्स; -वेबकिट-एलाइन-आइटम: फ्लेक्स-स्टार्ट; डिस्प्ले: फ्लेक्स; एलाइन-आइटम: फ्लेक्स-स्टार्ट;)
6.2.2. संरेखित-स्वयं
यह संपत्ति एकल फ्लेक्स तत्व को फ्लेक्स कंटेनर की ऊंचाई तक संरेखित करने के लिए जिम्मेदार है। संरेखण-आइटम द्वारा निर्दिष्ट संरेखण को ओवरराइड करता है। विरासत में नहीं मिला.
| मान: | |
| ऑटो | डिफ़ॉल्ट मान। एक फ्लेक्स तत्व फ्लेक्स कंटेनर की संरेखण-आइटम संपत्ति में निर्दिष्ट संरेखण का उपयोग करता है। |
| फ्लेक्स-स्टार्ट | फ्लेक्स तत्व के शीर्ष किनारे को फ्लेक्स लाइन के करीब (या दूरी पर, निर्दिष्ट मार्जिन को ध्यान में रखते हुए) रखा गया है ढांचा सीमातत्व) अनुप्रस्थ अक्ष की शुरुआत से गुजर रहा है। |
| फ्लेक्स-एंड | फ्लेक्स तत्व के निचले किनारे को क्रॉस अक्ष के अंत से गुजरने वाली फ्लेक्स लाइन के निकट (या कुछ दूरी पर, तत्व के निर्दिष्ट मार्जिन और सीमाओं को ध्यान में रखते हुए) रखा गया है। |
| केंद्र | फ्लेक्स तत्व का मार्जिन फ्लेक्स लाइन के भीतर क्रॉस अक्ष के साथ केंद्रित होता है। |
| आधारभूत | फ्लेक्स तत्व आधार रेखा से संरेखित है। |
| खींचना | यदि किसी फ्लेक्स आइटम का क्रॉस-साइज़ ऑटो है और उसका कोई भी क्रॉस-मार्जिन मान ऑटो नहीं है, तो आइटम खिंच जाता है। डिफ़ॉल्ट मान। |
| प्रारंभिक | संपत्ति मान को डिफ़ॉल्ट मान पर सेट करता है। |
| इनहेरिट | मूल तत्व से संपत्ति का मूल्य प्राप्त होता है। |
चावल। 11. व्यक्तिगत फ्लेक्स आइटम को संरेखित करना वाक्य - विन्यास
फ्लेक्स-कंटेनर (डिस्प्ले: -वेबकिट-फ्लेक्स; डिस्प्ले: फ्लेक्स; ) .फ्लेक्स-आइटम (-वेबकिट-एलाइन-सेल्फ: सेंटर; एलाइन-सेल्फ: सेंटर;)
6.3. फ्लेक्स कंटेनर की पंक्तियों को संरेखित करना: संरेखित-सामग्री
जब क्रॉस अक्ष पर अतिरिक्त जगह होती है, तो प्रॉपर्टी फ्लेक्स कंटेनर में पंक्तियों को संरेखित करती है, जस्टिफ़ाइ-कंटेंट प्रॉपर्टी का उपयोग करके मुख्य अक्ष पर अलग-अलग आइटम को उचित ठहराने के समान। यह संपत्ति एकल-पंक्ति फ्लेक्स कंटेनर को प्रभावित नहीं करती है। विरासत में नहीं मिला.
| मान: | |
| फ्लेक्स-स्टार्ट | फ्लेक्स कंटेनर की शुरुआत की ओर पंक्तियाँ खड़ी की जाती हैं। पहली पंक्ति के किनारे को फ्लेक्स कंटेनर के किनारे के करीब रखा गया है, प्रत्येक अगली पंक्ति को पिछली पंक्ति के करीब रखा गया है। |
| फ्लेक्स-एंड | पंक्तियाँ फ्लेक्स कंटेनर के अंत की ओर खड़ी होती हैं। अंतिम पंक्ति के किनारे को फ्लेक्स कंटेनर के किनारे के करीब रखा गया है, प्रत्येक पिछली पंक्ति को अगली पंक्ति के करीब रखा गया है। |
| केंद्र | पंक्तियाँ फ्लेक्स कंटेनर के केंद्र की ओर खड़ी होती हैं। पंक्तियाँ एक-दूसरे के करीब हैं और फ्लेक्स कंटेनर के केंद्र से संरेखित हैं, फ्लेक्स कंटेनर की सामग्री के शुरुआती किनारे और पहली पंक्ति के बीच और फ्लेक्स कंटेनर की सामग्री के अंतिम किनारे और अंतिम पंक्ति के बीच समान दूरी है। |
| बीच का स्थान | पंक्तियों को फ्लेक्स कंटेनर में समान रूप से वितरित किया जाता है। यदि शेष खाली स्थान नकारात्मक है या फ्लेक्स कंटेनर में केवल एक फ्लेक्स लाइन है, तो यह मान फ्लेक्स-स्टार्ट के समान है। अन्यथा, पहली पंक्ति के किनारे को फ्लेक्स कंटेनर की सामग्री के शुरुआती किनारे के करीब रखा गया है, और अंतिम पंक्ति के किनारे को फ्लेक्स कंटेनर की सामग्री के अंतिम किनारे के करीब रखा गया है। शेष रेखाओं को इस प्रकार वितरित किया जाता है कि किन्हीं दो आसन्न रेखाओं के बीच की दूरी समान हो। |
| अंतरिक्ष-चारों ओर | फ्लेक्स कंटेनर में दोनों सिरों पर आधी जगह के साथ लाइनें समान दूरी पर हैं। यदि शेष खाली स्थान ऋणात्मक है, तो यह मान केंद्र केंद्र के समान है। अन्यथा, रेखाओं को इस प्रकार वितरित किया जाता है कि किन्हीं दो आसन्न रेखाओं के बीच की दूरी समान हो, और पहली / के बीच की दूरी समान हो। अंतिम पंक्तियाँऔर फ्लेक्स कंटेनर की सामग्री के किनारे लाइनों के बीच की दूरी के आधे थे। |
| खींचना | डिफ़ॉल्ट मान। सभी उपलब्ध स्थान को भरने के लिए फ्लेक्स वस्तुओं की पंक्तियाँ समान रूप से फैलती हैं। यदि शेष खाली स्थान ऋणात्मक है, तो यह मान flex-start के समान है। अन्यथा, खाली स्थान सभी पंक्तियों के बीच समान रूप से विभाजित हो जाएगा, जिससे उनका पार्श्व आकार बढ़ जाएगा। |
| प्रारंभिक | संपत्ति मान को डिफ़ॉल्ट मान पर सेट करता है। |
| इनहेरिट | मूल तत्व से संपत्ति का मूल्य प्राप्त होता है। |
चावल। 12. फ्लेक्स तत्वों का बहु-पंक्ति संरेखण वाक्य - विन्यास
फ्लेक्स-कंटेनर (डिस्प्ले: -वेबकिट-फ्लेक्स; -वेबकिट-फ्लेक्स-फ्लो: रो रैप; -वेबकिट-एलाइन-कंटेंट: फ्लेक्स-एंड; डिस्प्ले: फ्लेक्स; फ्लेक्स-फ्लो: रो रैप; एलाइन-कंटेंट: फ्लेक्स-एंड ; ऊंचाई: 100px )
मैं फ्लेक्सबॉक्स के बारे में बात करना चाहूंगा। फ्लेक्सबॉक्स-लेआउट मॉड्यूल (लचीला बॉक्स - "लचीला ब्लॉक", चालू इस पल W3C कैंडिडेट सिफ़ारिश का लक्ष्य और अधिक पेशकश करना है प्रभावी तरीकाएक कंटेनर में तत्वों के बीच खाली स्थान का लेआउट, संरेखण और वितरण, भले ही उनका आकार अज्ञात और/या गतिशील हो (इसलिए शब्द "लचीला")।
फ्लेक्स लेआउट का मुख्य विचार कंटेनर को स्थान को बेहतर ढंग से भरने के लिए अपने तत्वों की चौड़ाई/ऊंचाई (और क्रम) को बदलने की क्षमता देना है (ज्यादातर मामलों में, सभी प्रकार के डिस्प्ले और स्क्रीन आकार का समर्थन करने के लिए)।एक फ्लेक्स कंटेनर जगह भरने के लिए तत्वों को खींचता है या उन्हें ओवरफ्लो होने से रोकने के लिए उन्हें संपीड़ित करता है।
सबसे महत्वपूर्ण बात, फ्लेक्सबॉक्स लेआउट पारंपरिक लेआउट (ब्लॉक लंबवत व्यवस्थित और इनलाइन तत्व क्षैतिज रूप से व्यवस्थित) के विपरीत, दिशा पर निर्भर नहीं करता है।जबकि नियमित लेआउट वेब पेजों के लिए बहुत अच्छा है, इसमें बड़े या जटिल अनुप्रयोगों का समर्थन करने के लिए लचीलेपन का अभाव है (विशेषकर जब स्क्रीन ओरिएंटेशन बदलने, आकार बदलने, खींचने, सिकुड़ने आदि की बात आती है).
क्योंकि फ्लेक्सबॉक्स एक संपूर्ण मॉड्यूल है, केवल एक संपत्ति नहीं, यह कई संपत्तियों को जोड़ती है।उनमें से कुछ को कंटेनर (मूल तत्व, जिसे फ्लेक्स कंटेनर कहा जाता है) पर लागू किया जाना चाहिए, जबकि अन्य गुण चाइल्ड तत्वों, या फ्लेक्स तत्वों पर लागू होते हैं।
जबकि एक नियमित लेआउट ब्लॉक और इनलाइन तत्वों की प्रवाह दिशाओं पर आधारित होता है, एक फ्लेक्स लेआउट "फ्लेक्स प्रवाह दिशाओं" पर आधारित होता है।
फ्लेक्सबॉक्स
मूल रूप से, तत्वों को या तो मुख्य अक्ष के साथ (मुख्य-प्रारंभ से मुख्य-अंत तक) या अनुप्रस्थ अक्ष के साथ (क्रॉस-स्टार्ट से क्रॉस-एंड तक) वितरित किया जाएगा।
मुख्य-अक्ष - मुख्य अक्ष जिसके साथ फ्लेक्स तत्व स्थित होते हैं।कृपया ध्यान दें कि यह क्षैतिज होना चाहिए, यह सब औचित्य-सामग्री की गुणवत्ता पर निर्भर करता है।
मुख्य-प्रारंभ | मुख्य-अंत - फ्लेक्स तत्वों को कंटेनर में मुख्य-प्रारंभ स्थिति से मुख्य-अंत स्थिति तक रखा जाता है।
मुख्य आकार - चयनित मुख्य आकार के आधार पर फ्लेक्स तत्व की चौड़ाई या ऊंचाई।आधार मात्रा या तो तत्व की चौड़ाई या ऊंचाई हो सकती है।
क्रॉस अक्ष - मुख्य अक्ष के लंबवत अनुप्रस्थ अक्ष।इसकी दिशा मुख्य अक्ष की दिशा पर निर्भर करती है।
क्रॉस-स्टार्ट | क्रॉस-एंड - फ्लेक्स लाइनें तत्वों से भरी होती हैं और क्रॉस-स्टार्ट स्थिति और क्रॉस-एंड स्थिति से कंटेनर में रखी जाती हैं।
क्रॉस आकार - चयनित आयाम के आधार पर फ्लेक्स तत्व की चौड़ाई या ऊंचाई, इस मान के बराबर है।यह गुण चयनित आयाम के आधार पर तत्व की चौड़ाई या ऊंचाई के समान है।
गुण
प्रदर्शन: फ्लेक्स | इनलाइन-फ्लेक्स;
एक फ्लेक्स कंटेनर (चयनित मान के आधार पर इनलाइन या ब्लॉक) को परिभाषित करता है, इसके सभी तत्काल वंशजों के लिए एक फ्लेक्स संदर्भ जोड़ता है।
प्रदर्शन: अन्य मान | फ्लेक्स | इनलाइन-फ्लेक्स;
ध्यान रखें:
सीएसएस कॉलम फ्लेक्स कंटेनर के साथ काम नहीं करतेफ्लोट, क्लियर और वर्टिकल-एलाइन फ्लेक्स आइटम के साथ काम नहीं करते हैं
फ्लेक्स-दिशा
फ्लेक्स कंटेनर के मूल तत्व से पहले लागू होता है।
मुख्य-अक्ष सेट करता है, जिससे कंटेनर में रखे गए फ्लेक्स आइटम के लिए दिशा परिभाषित होती है।
फ्लेक्स-दिशा: पंक्ति | पंक्ति-विपरीत | कॉलम | कॉलम-रिवर्स
पंक्ति (डिफ़ॉल्ट): लीटर के लिए बाएँ से दाएँ, आरटीएल के लिए दाएँ से बाएँ;
पंक्ति-रिवर्स: लीटर के लिए दाएं से बाएं, आरटीएल के लिए बाएं से दाएं;
स्तंभ: पंक्ति के समान, ऊपर से नीचे तक;
कॉलम-रिवर्स: पंक्ति-रिवर्स के समान, नीचे से ऊपर तक।
फ्लेक्स-रैप
फ्लेक्स कंटेनर के मूल तत्व से पहले लागू होता है।
यह निर्धारित करता है कि कंटेनर सिंगल-लाइन है या मल्टी-लाइन, साथ ही क्रॉस अक्ष की दिशा, यह निर्धारित करती है कि नई लाइनें किस दिशा में रखी जाएंगी।
फ्लेक्स-रैप: अब्रैप | लपेटो | रैप-रिवर्स
अब्रैप (डिफ़ॉल्ट): सिंगल लाइन / एलटीआर के लिए बाएं से दाएं, आरटीएल के लिए दाएं से बाएं;
रैप: मल्टीलाइन / एलटीआर के लिए बाएं से दाएं, आरटीएल के लिए दाएं से बाएं;
रैप-रिवर्स: मल्टीलाइन / एलटीआर के लिए दाएं से बाएं, आरटीएल के लिए बाएं से दाएं।
फ्लेक्स-प्रवाह
फ्लेक्स कंटेनर के मूल तत्व से पहले लागू होता है।
यह फ्लेक्स-दिशा और फ्लेक्स-रैप गुणों के लिए शॉर्टहैंड है, जो एक साथ प्रमुख और क्रॉस अक्षों को परिभाषित करते हैं।डिफ़ॉल्ट मान पंक्ति अब्रैप है।
फ्लेक्स-प्रवाह< ‘flex-direction’> || < ‘Flex-wrap’>
औचित्य-सामग्री
फ्लेक्स कंटेनर के मूल तत्व से पहले लागू होता है।
प्रमुख अक्ष के सापेक्ष संरेखण को परिभाषित करता है।उस स्थिति में खाली स्थान वितरित करने में मदद करता है जब लाइन तत्व "खिंचाव" या खिंचाव नहीं करते हैं, लेकिन पहले से ही अपने अधिकतम आकार तक पहुंच चुके हैं।जब तत्व रेखा से आगे जाते हैं तो उनके संरेखण पर भी कुछ नियंत्रण की अनुमति मिलती है।
औचित्य-सामग्री: फ्लेक्स-स्टार्ट | फ्लेक्स-एंड | केंद्र | बीच का स्थान | अंतरिक्ष-चारों ओर
फ्लेक्स-स्टार्ट (डिफ़ॉल्ट): आइटम पंक्ति की शुरुआत में चले जाते हैं;
फ्लेक्स-एंड: तत्व पंक्ति के अंत तक जाते हैं;
केंद्र: तत्व रेखा के मध्य में संरेखित हैं;
स्पेस-बीच: तत्वों को समान रूप से वितरित किया जाता है (पंक्ति की शुरुआत में पहला तत्व, अंत में अंतिम)
अंतरिक्ष-चारों ओर: तत्वों को एक दूसरे के बीच और रेखा के बाहर समान दूरी के साथ समान रूप से वितरित किया जाता है।
औचित्य-सामग्री
संरेखित-आइटम
फ्लेक्स कंटेनर के मूल तत्व से पहले लागू होता है।
वर्तमान लाइन पर क्रॉस अक्ष के सापेक्ष फ्लेक्स आइटम कैसे स्थित हैं, इसके लिए डिफ़ॉल्ट व्यवहार को परिभाषित करता है।इसे क्रॉस अक्ष (मुख्य अक्ष के लंबवत) के लिए justify-content के एक संस्करण के रूप में सोचें।
संरेखित-आइटम: फ्लेक्स-स्टार्ट | फ्लेक्स-एंड | केंद्र | आधार रेखा | खींचना
फ्लेक्स-स्टार्ट: क्रॉस-स्टार्ट स्थिति पर स्थित तत्वों के लिए क्रॉस-स्टार्ट बॉर्डर;
फ्लेक्स-एंड: क्रॉस-एंड स्थिति पर स्थित तत्वों के लिए क्रॉस-एंड बॉर्डर;
केंद्र: तत्व क्रॉस अक्ष के केंद्र से संरेखित हैं;
आधार रेखा: तत्व अपनी आधार रेखा से संरेखित होते हैं;
खिंचाव (डिफ़ॉल्ट): कंटेनर को भरने के लिए तत्वों को बढ़ाया जाता है (न्यूनतम-चौड़ाई / अधिकतम-चौड़ाई को ध्यान में रखते हुए)।
संरेखित-आइटम
संरेखित-सामग्री
फ्लेक्स कंटेनर के मूल तत्व से पहले लागू होता है। क्रॉस अक्ष पर खाली जगह होने पर फ्लेक्स कंटेनर की पंक्तियों को संरेखित करता है, ठीक उसी तरह जैसे कि justify-content मुख्य अक्ष पर करता है। नोट: यह प्रॉपर्टी सिंगल-लाइन फ्लेक्सबॉक्स के साथ काम नहीं करती है।
संरेखण-सामग्री: फ्लेक्स-स्टार्ट | फ्लेक्स-एंड | केंद्र | बीच का स्थान | अंतरिक्ष-चारों ओर | खींचना
फ्लेक्स-स्टार्ट: लाइनें कंटेनर की शुरुआत के सापेक्ष संरेखित होती हैं;
फ्लेक्स-एंड: लाइनें कंटेनर के अंत के सापेक्ष संरेखित होती हैं;
केंद्र: रेखाएँ कंटेनर के केंद्र से संरेखित होती हैं;
रिक्त स्थान-बीच: पंक्तियाँ समान रूप से वितरित की जाती हैं (पंक्ति की शुरुआत में पहली पंक्ति, अंत में अंतिम)
अंतरिक्ष-चारों ओर: रेखाएँ एक दूसरे के बीच समान दूरी के साथ समान रूप से वितरित की जाती हैं;
खिंचाव (डिफ़ॉल्ट): उपलब्ध स्थान को भरने के लिए लाइनें खींची जाती हैं।
संरेखित-सामग्री
आदेश
डिफ़ॉल्ट रूप से, फ्लेक्स आइटम उनके मूल क्रम में व्यवस्थित होते हैं।हालाँकि, ऑर्डर प्रॉपर्टी उस क्रम को नियंत्रित कर सकती है जिसमें वे कंटेनर में दिखाई देते हैं।
आदेश 1
फ्लेक्स-ग्रो
चाइल्ड तत्व/फ्लेक्स तत्व पर लागू होता है। यदि आवश्यक हो तो फ्लेक्स तत्व के "बढ़ने" की क्षमता को परिभाषित करता है।एक आयामहीन मान लेता है और अनुपात के रूप में कार्य करता है।यह निर्धारित करता है कि कोई तत्व किसी कंटेनर के अंदर कितनी खाली जगह ले सकता है। यदि सभी तत्वों में फ्लेक्स-ग्रो प्रॉपर्टी 1 पर सेट है, तो प्रत्येक बच्चे को कंटेनर के अंदर समान आकार प्राप्त होगा।यदि आप बच्चों में से एक को 2 पर सेट करते हैं, तो यह अन्य बच्चों की तुलना में दोगुनी जगह लेगा।
फ्लेक्स-ग्रो
फ्लेक्स-सिकुड़ना
चाइल्ड तत्व/फ्लेक्स तत्व पर लागू होता है।
जरूरत पड़ने पर फ्लेक्स आइटम को सिकोड़ने की क्षमता को परिभाषित करता है।
फ्लेक्स-सिकुड़ना
ऋणात्मक संख्याएँ स्वीकार नहीं की जातीं.
फ्लेक्स-आधार
चाइल्ड तत्व/फ्लेक्स तत्व पर लागू होता है। कंटेनर में स्थान आवंटित करने से पहले किसी तत्व के लिए डिफ़ॉल्ट आकार को परिभाषित करता है।
फ्लेक्स-आधार
मोड़ना
चाइल्ड तत्व/फ्लेक्स तत्व पर लागू होता है। यह फ्लेक्स-ग्रो, फ्लेक्स-श्रिंक और फ्लेक्स-बेस के लिए शॉर्टहैंड है।दूसरा और तीसरा पैरामीटर (फ्लेक्स-सिकुड़ना, फ्लेक्स-आधार) वैकल्पिक हैं।डिफ़ॉल्ट मान 0 1 ऑटो है।
फ्लेक्स: कोई नहीं | [< ‘Flex-grow «> <» flex-shrink’>? || < ‘Flex-basis’>]
संरेखित-स्वयं
चाइल्ड तत्व/फ्लेक्स तत्व पर लागू होता है। आपको अलग-अलग फ्लेक्स आइटम के लिए डिफ़ॉल्ट या एलाइन-आइटम संरेखण को ओवरराइड करने की अनुमति देता है। उपलब्ध मूल्यों की बेहतर समझ के लिए संरेखण-आइटम संपत्ति का विवरण देखें।
संरेखित-स्वयं: ऑटो | फ्लेक्स-स्टार्ट | फ्लेक्स-एंड | केंद्र | आधार रेखा | खींचना
उदाहरण
आइए बहुत, बहुत से शुरू करें सरल उदाहरण, लगभग हर दिन होता है: संरेखण बिल्कुल केंद्र में है।यदि आप फ्लेक्सबॉक्स का उपयोग करते हैं तो इससे आसान कुछ नहीं हो सकता।
पैरेंट (डिस्प्ले: फ्लेक्स; ऊंचाई: 300px; ) .बच्चा (चौड़ाई: 100px; / * जो भी * / ऊंचाई: 100px; / * जो भी * / मार्जिन: ऑटो; / * जादू! * / )
यह उदाहरण इस तथ्य पर निर्भर करता है कि ऑटो पर सेट फ्लेक्स कंटेनर के नीचे का मार्जिन अतिरिक्त स्थान को खा जाता है, इसलिए इस तरह से इंडेंट करने का कार्य तत्व को दोनों अक्षों पर बिल्कुल केंद्रित करेगा। अब आइए कुछ गुणों का उपयोग करें।एक निश्चित आकार (सौंदर्य के लिए) के 6 तत्वों के एक सेट की कल्पना करें, लेकिन कंटेनर का आकार बदलने की क्षमता के साथ।हम उन्हें समान रूप से क्षैतिज रूप से वितरित करना चाहते हैं ताकि जब हम ब्राउज़र विंडो का आकार बदलें तो सब कुछ अच्छा दिखे (कोई @मीडिया प्रश्न नहीं!)।
फ्लेक्स-कंटेनर (
/ * सबसे पहले, आइए एक फ्लेक्स संदर्भ बनाएं * /
प्रदर्शन: फ्लेक्स;
/* अब आइए प्रवाह की दिशा निर्धारित करें और क्या हमें तत्व चाहिए
एक नई लाइन पर ले जाया गया
*याद रखें कि यह वैसा ही है:
* फ्लेक्स-दिशा: पंक्ति;
* फ्लेक्स-रैप: लपेटें;
* /
फ्लेक्स-फ्लो: पंक्ति आवरण;
/ *अब आइए तय करें कि स्थान का वितरण कैसे किया जाएगा* /
}
तैयार। बाकी सब कुछ पंजीकरण का मामला है। आइए कुछ और प्रयास करें.कल्पना कीजिए कि हम अपनी साइट के शीर्ष पर दाईं ओर संरेखित नेविगेशन चाहते हैं, लेकिन हम चाहते हैं कि यह मध्यम आकार की स्क्रीन पर केंद्र-संरेखित हो और छोटी स्क्रीन पर एक एकल कॉलम बन जाए।सब कुछ काफी सरल है.
/ *बड़ी स्क्रीन* /
।मार्गदर्शन(
प्रदर्शन: फ्लेक्स;
फ्लेक्स-फ्लो: पंक्ति आवरण;
/*तत्वों को मुख्य अक्ष के अनुदिश रेखा के अंत तक स्थानांतरित करता है* /
औचित्य-सामग्री: फ्लेक्स-एंड;
}
मीडिया सभी और (अधिकतम-चौड़ाई: 800px) (
।मार्गदर्शन(
/* मध्यम स्क्रीन के लिए, हम नेविगेशन को केन्द्रित करते हैं,
तत्वों के बीच खाली स्थान को समान रूप से वितरित करना * /
औचित्य-सामग्री: अंतरिक्ष-चारों ओर;
}
}
/*छोटी स्क्रीन*/
मीडिया सभी और (अधिकतम-चौड़ाई: 500px) (
।मार्गदर्शन(
/ * छोटे स्क्रीन पर, हम तत्वों को एक पंक्ति के बजाय एक कॉलम में व्यवस्थित करते हैं * /
फ्लेक्स-दिशा: स्तंभ;
}
}
आइए फ्लेक्स आइटम के लचीलेपन के साथ खेलें!पूर्ण-चौड़ाई वाले शीर्षलेख और पादलेख के साथ मोबाइल-अनुकूल तीन-स्तंभ लेआउट के बारे में क्या ख़याल है?और व्यवस्था के एक अलग क्रम में.
आवरण (
प्रदर्शन: फ्लेक्स;
फ्लेक्स-फ्लो: पंक्ति आवरण;
}
/ * सभी तत्वों को 100% चौड़ाई पर सेट करें * /
.हेडर, .मेन, .एनएवी, .एसाइड, .फुटर (
फ्लेक्स 1100%;
}
/* इस मामले में हम अपना मार्गदर्शन करने के लिए मूल आदेश पर भरोसा करते हैं
* मोबाइल उपकरणों:
* 1 हेडर
* 2 नौसेना
*3 मुख्य
* 4 एक तरफ
* 5 फ़ुटर
* /
/*मध्यम स्क्रीन*/
मीडिया सभी और (न्यूनतम-चौड़ाई: 600px) (
/ *दोनों साइडबार एक ही लाइन पर स्थित हैं* /
.एकतरफ (फ्लेक्स: 1 ऑटो; )
}
/ *बड़ी स्क्रीन* /
संक्षेप में, फ्लेक्सबॉक्स वाला लेआउट हमें देता है सरल उपायएक बार कठिन कार्य. उदाहरण के लिए, जब आपको किसी तत्व को लंबवत रूप से संरेखित करने की आवश्यकता होती है, या स्क्रीन के नीचे पाद लेख को दबाते हैं, या बस एक पंक्ति में कई ब्लॉक सम्मिलित करते हैं ताकि वे सभी खाली स्थान पर कब्जा कर लें। इसी तरह की समस्याओं को बिना फ्लेक्स के हल किया जा सकता है। लेकिन एक नियम के रूप में, ये समाधान "बैसाखी" की तरह हैं - अपने इच्छित उद्देश्य के अलावा अन्य उद्देश्यों के लिए सीएसएस का उपयोग करने की तकनीक। जबकि फ्लेक्सबॉक्स के साथ ऐसे कार्यों को ठीक उसी तरह हल किया जाता है जैसा कि फ्लेक्स मॉडल का इरादा है।
सीएसएस फ्लेक्सिबल बॉक्स लेआउट मॉड्यूल (लचीले ब्लॉकों के साथ लेआउट के लिए सीएसएस मॉड्यूल), संक्षेप में फ्लेक्सबॉक्स, विभिन्न चौड़ाई और ऊंचाइयों के लिए अनुकूलित HTML डिज़ाइनों सहित विभिन्न प्रकार के HTML डिज़ाइन बनाते समय कमियों को खत्म करने और लेआउट को तार्किक और सरल बनाने के लिए बनाया गया था। . और एक तार्किक दृष्टिकोण, एक नियम के रूप में, अप्रत्याशित स्थानों में काम करता है, जहां परिणाम की जांच नहीं की गई है - तर्क ही सब कुछ है!
फ्लेक्सबॉक्स आपको कंटेनर के अंदर तत्वों के विभिन्न मापदंडों को सुरुचिपूर्ण ढंग से नियंत्रित करने की अनुमति देता है: दिशा, क्रम, चौड़ाई, ऊंचाई, साथ और पार संरेखण, मुक्त स्थान का वितरण, तत्वों का खिंचाव और संपीड़न।
बुनियादी ज्ञान
फ्लेक्सबॉक्स में एक कंटेनर और उसके आइटम (लचीले तत्व) होते हैं।
फ्लेक्सबॉक्स को सक्षम करने के लिए, किसी भी HTML तत्व को केवल सीएसएस संपत्ति डिस्प्ले:फ्लेक्स निर्दिष्ट करने की आवश्यकता है; या डिस्प्ले:इनलाइन-फ्लेक्स; .
फ्लेक्स प्रॉपर्टी को सक्षम करने के बाद, कंटेनर के अंदर दो अक्ष बनाए जाते हैं: मुख्य और अनुप्रस्थ (लंबवत (⊥), क्रॉस अक्ष)। सभी नेस्टेड तत्व (प्रथम स्तर के) मुख्य अक्ष के साथ पंक्तिबद्ध हैं। डिफ़ॉल्ट रूप से, मुख्य अक्ष क्षैतिज है और बाएं से दाएं (→) की ओर निर्देशित है, और क्रॉस अक्ष तदनुसार लंबवत है और ऊपर से नीचे (↓) की ओर निर्देशित है।
मुख्य और क्रॉस कुल्हाड़ियों की अदला-बदली की जा सकती है, फिर तत्व ऊपर से नीचे (↓) की ओर स्थित होंगे और जब वे ऊंचाई में फिट नहीं होंगे, तो वे बाएं से दाएं (→) की ओर बढ़ेंगे - यानी, कुल्हाड़ियों ने बस स्थानों की अदला-बदली की है . इस स्थिति में, तत्वों की व्यवस्था की शुरुआत और अंत नहीं बदलता है - केवल दिशाएँ (कुल्हाड़ियाँ) बदलती हैं! यही कारण है कि आपको कंटेनर के अंदर कुल्हाड़ियों की कल्पना करने की आवश्यकता है। हालाँकि, किसी को यह नहीं सोचना चाहिए कि कुछ "भौतिक" कुल्हाड़ियाँ हैं और वे किसी चीज़ को प्रभावित करती हैं। यहां अक्ष केवल कंटेनर के अंदर तत्वों की गति की दिशा है। उदाहरण के लिए, यदि हमने मुख्य अक्ष के केंद्र में तत्वों के संरेखण को निर्दिष्ट किया और फिर इस मुख्य अक्ष की दिशा बदल दी, तो संरेखण बदल जाएगा: तत्व क्षैतिज रूप से मध्य में थे, लेकिन लंबवत रूप से मध्य में हो गए... उदाहरण देखें.
फ्लेक्सबॉक्स की एक अन्य महत्वपूर्ण विशेषता अनुप्रस्थ दिशा में पंक्तियों की उपस्थिति है। यह समझने के लिए कि हम किस बारे में बात कर रहे हैं, आइए कल्पना करें कि एक मुख्य बात है क्षैतिज अक्ष, बहुत सारे तत्व हैं और वे कंटेनर में "फिट" नहीं होते हैं, इसलिए वे दूसरी पंक्ति में चले जाते हैं। वे। एक कंटेनर इस तरह दिखता है: एक कंटेनर जिसके अंदर दो पंक्तियाँ होती हैं, प्रत्येक पंक्ति में कई तत्व होते हैं। परिचय? अब याद रखें कि हम न केवल तत्वों को, बल्कि पंक्तियों को भी लंबवत रूप से संरेखित कर सकते हैं! यह कैसे काम करता है यह संपत्ति के उदाहरण में स्पष्ट रूप से देखा गया है। और यह योजनाबद्ध रूप से ऐसा दिखता है:
सीएसएस गुण जो लेआउट मॉडल को प्रभावित कर सकते हैं: फ़्लोट, क्लियर, वर्टिकल-एलाइन, कॉलम फ्लेक्स डिज़ाइन में काम नहीं करते हैं। यहां लेआउट बनाने के लिए एक अलग मॉडल का उपयोग किया जाता है और इन सीएसएस गुणों को आसानी से नजरअंदाज कर दिया जाता है।
फ्लेक्सबॉक्स सीएसएस गुण
फ्लेक्सबॉक्स में अलग-अलग शामिल हैं सीएसएस नियमसंपूर्ण फ्लेक्स डिज़ाइन को नियंत्रित करने के लिए। कुछ को मुख्य कंटेनर पर लागू करने की आवश्यकता है, और अन्य को इस कंटेनर के तत्वों पर लागू करने की आवश्यकता है।
कंटेनर के लिए
प्रदर्शन:तत्व के लिए फ्लेक्स गुण सक्षम करता है। यह गुण स्वयं तत्व और उसके नेस्टेड तत्वों को कवर करता है: केवल प्रथम-स्तरीय वंशज प्रभावित होते हैं - वे फ्लेक्स कंटेनर के तत्व बन जाएंगे।
- मोड़ना- तत्व अपनी पूरी चौड़ाई तक फैला हुआ है और आसपास के ब्लॉकों के बीच उसका पूरा स्थान है। लाइन ब्रेक ब्लॉक के आरंभ और अंत में होते हैं।
- इनलाइन-फ्लेक्स- एक तत्व अन्य तत्वों के चारों ओर लिपटा हुआ है। इस स्थिति में, इसके आंतरिक भाग को ब्लॉक तत्व के रूप में स्वरूपित किया जाता है, और तत्व को इनलाइन के रूप में स्वरूपित किया जाता है।
फ्लेक्स और इनलाइन-फ्लेक्स इस मायने में भिन्न हैं कि वे आसपास के तत्वों के साथ अलग-अलग तरह से इंटरैक्ट करते हैं, डिस्प्ले:ब्लॉक और डिस्प्ले:इनलाइन-ब्लॉक के समान।
फ्लेक्स-दिशा:कंटेनर की मुख्य धुरी की दिशा बदलता है। अनुप्रस्थ अक्ष तदनुसार बदलता है।
- पंक्ति (डिफ़ॉल्ट)- बाएं से दाएं तत्वों की दिशा (→)
- स्तंभ- ऊपर से नीचे तक तत्वों की दिशा (↓)
- पंक्ति-विपरीत- दाएं से बाएं तत्वों की दिशा (←)
- कॉलम-रिवर्स- नीचे से ऊपर तक तत्वों की दिशा ()
उन तत्वों के स्थानांतरण को नियंत्रित करता है जो कंटेनर में फिट नहीं होते हैं।
- अब्रैप (डिफ़ॉल्ट)- नेस्टेड तत्वों को एक पंक्ति में (दिशा=पंक्ति के साथ) या एक कॉलम में (दिशा=कॉलम के साथ) रखा जाता है, भले ही उन्हें कंटेनर में रखा गया हो या नहीं।
- लपेटना- इसमें तत्वों को अगली पंक्ति में ले जाना शामिल है यदि वे कंटेनर में फिट नहीं होते हैं। यह अनुप्रस्थ अक्ष के साथ तत्वों की गति को सक्षम बनाता है।
- रैप-रिवर्स- रैप के समान, केवल स्थानांतरण नीचे नहीं, बल्कि ऊपर (विपरीत दिशा में) होगा।
फ्लेक्स-दिशा और फ्लेक्स-रैप दोनों गुणों को जोड़ती है। इन्हें अक्सर एक साथ उपयोग किया जाता है, इसलिए कम कोड लिखने के लिए फ्लेक्स-फ्लो प्रॉपर्टी बनाई गई थी।
फ्लेक्स-फ्लो एक स्थान द्वारा अलग किए गए इन दो गुणों के मूल्यों को स्वीकार करता है। या आप किसी भी संपत्ति के लिए एक ही मूल्य निर्दिष्ट कर सकते हैं।
/* केवल फ्लेक्स-दिशा */ फ्लेक्स-फ्लो: पंक्ति; फ्लेक्स-फ्लो: पंक्ति-रिवर्स; फ्लेक्स-फ्लो: कॉलम; फ्लेक्स-फ्लो: कॉलम-रिवर्स; /* केवल फ्लेक्स-रैप */ फ्लेक्स-फ्लो: अब्रैप; फ्लेक्स-फ्लो: रैप; फ्लेक्स-फ्लो: रैप-रिवर्स; /* दोनों मान एक साथ: फ्लेक्स-दिशा और फ्लेक्स-रैप */ फ्लेक्स-फ्लो: पंक्ति अब्रैप; फ्लेक्स-फ्लो: कॉलम रैप; फ्लेक्स-फ्लो: कॉलम-रिवर्स रैप-रिवर्स; औचित्य-सामग्री:
मुख्य अक्ष के साथ तत्वों को संरेखित करता है: यदि दिशा=पंक्ति, तो क्षैतिज रूप से, और यदि दिशा=स्तंभ, तो लंबवत।
- फ्लेक्स-स्टार्ट (डिफ़ॉल्ट)- तत्व शुरुआत से जाएंगे (अंत में कुछ जगह बची हो सकती है)।
- फ्लेक्स-एंड- तत्वों को अंत में संरेखित किया गया है (स्थान शुरुआत में रहेगा)
- केंद्र- केंद्र में (बाएं और दाएं तरफ जगह रहेगी)
- बीच का स्थान- सबसे बाहरी तत्वों को किनारों पर दबाया जाता है (तत्वों के बीच का स्थान समान रूप से वितरित किया जाता है)
- अंतरिक्ष-चारों ओर- मुक्त स्थान को तत्वों के बीच समान रूप से वितरित किया जाता है (सबसे बाहरी तत्वों को किनारों पर नहीं दबाया जाता है)। कंटेनर के किनारे और बाहरी तत्वों के बीच का स्थान पंक्ति के मध्य के तत्वों के बीच के स्थान से आधा होगा।
- स्थान-समान रूप से
अनुप्रस्थ अक्ष के साथ तत्वों वाली पंक्तियों को संरेखित करता है। केवल विपरीत अक्ष के लिए justify-content के समान।
ध्यान दें: यह तब काम करता है जब कम से कम 2 पंक्तियाँ हों, यानी। यदि केवल 1 पंक्ति है, तो कुछ नहीं होगा।
वे। यदि flex-direction: row है, तो यह गुण अदृश्य पंक्तियों को लंबवत रूप से संरेखित करेगा। यहां यह ध्यान रखना महत्वपूर्ण है कि ब्लॉक की ऊंचाई कठोरता से निर्धारित की जानी चाहिए और पंक्तियों की ऊंचाई से अधिक होनी चाहिए, अन्यथा पंक्तियां स्वयं कंटेनर को फैलाएंगी और उनका कोई भी संरेखण अर्थहीन हो जाएगा, क्योंकि बीच में कोई खाली जगह नहीं है उन्हें... लेकिन जब flex-direction: column होता है, तो पंक्तियाँ क्षैतिज रूप से चलती हैं → और कंटेनर की चौड़ाई लगभग हमेशा पंक्तियों की चौड़ाई से अधिक होती है और पंक्तियों को संरेखित करना तुरंत समझ में आता है...
- खिंचाव (डिफ़ॉल्ट)- पंक्ति को पूरी तरह भरने के लिए पंक्तियाँ खिंचती हैं
- फ्लेक्स-स्टार्ट- पंक्तियों को कंटेनर के शीर्ष पर समूहीकृत किया गया है (अंत में कुछ जगह बची हो सकती है)।
- फ्लेक्स-एंड- पंक्तियों को कंटेनर के नीचे समूहीकृत किया गया है (शुरुआत में जगह रहेगी)
- केंद्र- पंक्तियों को कंटेनर के केंद्र में समूहीकृत किया गया है (किनारों पर जगह होगी)
- बीच का स्थान- बाहरी पंक्तियों को किनारों से दबाया जाता है (पंक्तियों के बीच का स्थान समान रूप से वितरित किया जाता है)
- अंतरिक्ष-चारों ओर- मुक्त स्थान को पंक्तियों के बीच समान रूप से वितरित किया जाता है (सबसे बाहरी तत्वों को किनारों पर नहीं दबाया जाता है)। कंटेनर के किनारे और बाहरी तत्वों के बीच का स्थान पंक्ति के मध्य के तत्वों के बीच के स्थान से आधा होगा।
- स्थान-समान रूप से- स्पेस-अराउंड के समान, केवल बाहरी तत्वों की कंटेनर के किनारों से दूरी तत्वों के बीच की दूरी के समान है।
एक पंक्ति (अदृश्य पंक्ति) के भीतर अनुप्रस्थ अक्ष के साथ तत्वों को संरेखित करता है। वे। पंक्तियाँ स्वयं संरेखित-सामग्री के माध्यम से संरेखित होती हैं, और इन पंक्तियों (पंक्तियों) के भीतर के तत्व संरेखित-आइटम के माध्यम से और सभी अनुप्रस्थ अक्ष के साथ संरेखित होते हैं। मुख्य अक्ष के साथ ऐसा कोई विभाजन नहीं है, पंक्तियों की कोई अवधारणा नहीं है और तत्वों को justify-content के माध्यम से संरेखित किया गया है।
- खिंचाव (डिफ़ॉल्ट)- लाइन को पूरी तरह से भरने के लिए तत्वों को फैलाया जाता है
- फ्लेक्स-स्टार्ट- तत्वों को पंक्ति की शुरुआत में दबाया जाता है
- फ्लेक्स-एंड- तत्वों को पंक्ति के अंत में दबाया जाता है
- केंद्र- तत्वों को पंक्ति के केंद्र में संरेखित किया गया है
- आधारभूत- तत्व टेक्स्ट बेसलाइन से संरेखित हैं
कंटेनर तत्वों के लिए
फ्लेक्स-ग्रो:कंटेनर में खाली जगह होने पर तत्व का आवर्धन कारक सेट करता है। डिफ़ॉल्ट फ्लेक्स-ग्रो: 0 यानी। किसी भी तत्व को बढ़ना नहीं चाहिए और कंटेनर में खाली जगह को भरना नहीं चाहिए।
डिफ़ॉल्ट फ्लेक्स-ग्रो: 0
- यदि आप सभी तत्वों के लिए flex-grow:1 निर्दिष्ट करते हैं, तो वे सभी समान रूप से फैलेंगे और कंटेनर में सभी खाली स्थान भर देंगे।
- यदि आप तत्वों में से किसी एक के लिए flex-grow:1 निर्दिष्ट करते हैं, तो यह कंटेनर में सभी खाली स्थान को भर देगा और justify-content के माध्यम से संरेखण अब काम नहीं करेगा: संरेखित करने के लिए कोई खाली स्थान नहीं है...
- फ्लेक्स-ग्रो के साथ:1। यदि उनमें से एक में flex-grow:2 है तो यह अन्य सभी से 2 गुना बड़ा होगा
- यदि किसी फ्लेक्स कंटेनर के अंदर सभी फ्लेक्स बॉक्स में flex-grow:3 है तो वे समान आकार के होंगे
- फ्लेक्स-ग्रो के साथ:3। यदि उनमें से एक में flex-grow:12 है तो यह अन्य सभी से 4 गुना बड़ा होगा
यह काम किस प्रकार करता है? मान लीजिए कि एक कंटेनर 500px चौड़ा है और इसमें दो तत्व हैं, प्रत्येक की आधार चौड़ाई 100px है। इसका मतलब है कि कंटेनर में 300 निःशुल्क पिक्सेल बचे हैं। अब, यदि हम flex-grow:2; निर्दिष्ट करते हैं; , और दूसरा फ्लेक्स-ग्रो: 1; , तो ब्लॉक कंटेनर की पूरी उपलब्ध चौड़ाई पर कब्जा कर लेंगे और पहले ब्लॉक की चौड़ाई 300px होगी, और दूसरे की 200px होगी। यह इस तथ्य से समझाया गया है कि कंटेनर में उपलब्ध 300px खाली स्थान को तत्वों के बीच 2:1 अनुपात में वितरित किया गया था, पहले के लिए +200px और दूसरे के लिए +100px।
नोट: मान निर्दिष्ट किया जा सकता है भिन्नात्मक संख्याएँ, उदाहरण के लिए: 0.5 - फ्लेक्स-ग्रो:0.5
फ्लेक्स-सिकुड़ना:तत्व का कमी कारक सेट करता है। गुण फ्लेक्स-ग्रो के विपरीत है और यह निर्धारित करता है कि यदि कंटेनर में कोई खाली जगह नहीं बची है तो तत्व को कैसे सिकुड़ना चाहिए। वे। संपत्ति तब काम करना शुरू कर देती है जब सभी तत्वों के आकार का योग कंटेनर के आकार से अधिक होता है।
डिफ़ॉल्ट फ्लेक्स-सिकुड़ना:1
मान लें कि कंटेनर 600px चौड़ा है और इसमें दो तत्व हैं, प्रत्येक 300px चौड़ा - flex-basis:300px; . वे। दो तत्व कंटेनर को पूरी तरह भर देते हैं। पहला तत्व फ्लेक्स-सिकुड़ें: 2 दें; , और दूसरा फ्लेक्स-सिकुड़ना: 1; . अब कंटेनर की चौड़ाई को 300px तक कम करते हैं, यानी। कंटेनर के अंदर फिट होने के लिए तत्वों को 300px तक सिकुड़ना होगा। वे 2:1 के अनुपात में सिकुड़ेंगे, यानी। पहला ब्लॉक 200px तक सिकुड़ जाएगा, और दूसरा 100px तक और नए तत्व का आकार 100px और 200px हो जाएगा।
नोट: आप मान में भिन्नात्मक संख्याएँ निर्दिष्ट कर सकते हैं, उदाहरण के लिए: 0.5 - फ्लेक्स-श्रिंक:0.5
फ्लेक्स-आधार:तत्व की आधार चौड़ाई निर्धारित करता है - तत्व की चौड़ाई को प्रभावित करने वाली अन्य स्थितियों की गणना करने से पहले की चौड़ाई। मान को px, em, rem, %, vw, vh, आदि में निर्दिष्ट किया जा सकता है। परिणामी चौड़ाई आधार चौड़ाई और फ्लेक्स-ग्रो, फ्लेक्स-श्रिंक और ब्लॉक के अंदर की सामग्री के मूल्यों पर निर्भर करेगी। ऑटो के साथ, तत्व को उसके अंदर की सामग्री के सापेक्ष आधार चौड़ाई मिलती है।
डिफ़ॉल्ट: ऑटो
कभी-कभी किसी तत्व की चौड़ाई को सामान्य चौड़ाई गुण के माध्यम से सेट करना बेहतर होता है। उदाहरण के लिए, चौड़ाई: 50%; इसका मतलब यह होगा कि कंटेनर के अंदर तत्व बिल्कुल 50% होगा, लेकिन फ्लेक्स-ग्रो और फ्लेक्स-श्रिंक गुण अभी भी काम करेंगे। यह तब आवश्यक हो सकता है जब तत्व को उसके अंदर की सामग्री द्वारा फ्लेक्स-आधार में निर्दिष्ट से अधिक खींचा जाता है। उदाहरण।
यदि खिंचाव और सिकुड़न शून्य पर सेट हैं तो फ्लेक्स-आधार "कठोर" होगा: फ्लेक्स-आधार: 200px; फ्लेक्स-ग्रो:0; फ्लेक्स-सिकुड़ना:0; . यह सब इस प्रकार लिखा जा सकता है: flex:0 0 200px; .
फ्लेक्स: (बढ़ने के आधार पर सिकुड़न)तीन गुणों का संक्षिप्त सारांश: फ्लेक्स-ग्रो फ्लेक्स-सिकोड़ें फ्लेक्स-बेस।
डिफ़ॉल्ट: फ्लेक्स: 0 1 ऑटो
हालाँकि, आप एक या दो मान निर्दिष्ट कर सकते हैं:
फ्लेक्स: कोई नहीं; /* 0 0 ऑटो */ /* नंबर */ फ्लेक्स: 2; /* फ्लेक्स-ग्रो (फ्लेक्स-आधार 0 पर जाता है) */ /* कोई संख्या नहीं */ फ्लेक्स: 10em; /* फ्लेक्स-आधार: 10em */ फ्लेक्स: 30px; /* फ्लेक्स-आधार: 30px */ फ्लेक्स: ऑटो; /* फ्लेक्स-आधार: ऑटो */ फ्लेक्स: सामग्री; /* फ्लेक्स-आधार: सामग्री */ फ्लेक्स: 1 30px; /* फ्लेक्स-ग्रो और फ्लेक्स-बेस */ फ्लेक्स: 2 2; /* फ्लेक्स-ग्रो और फ्लेक्स-श्रिंक (फ्लेक्स-आधार 0 पर जाता है) */ फ्लेक्स: 2 2 10%; /* फ्लेक्स-ग्रो और फ्लेक्स-श्रिंक और फ्लेक्स-बेस */ अलाइन-सेल्फ:
आपको केवल एक तत्व के लिए संरेखण-आइटम गुण को बदलने की अनुमति देता है।
डिफ़ॉल्ट: संरेखण-आइटम कंटेनर से
- खींचना- लाइन को पूरी तरह से भरने के लिए तत्व को फैलाया जाता है
- फ्लेक्स-स्टार्ट- तत्व को लाइन की शुरुआत में दबाया जाता है
- फ्लेक्स-एंड- तत्व को पंक्ति के अंत तक दबाया जाता है
- केंद्र- तत्व रेखा के केंद्र से संरेखित है
आधारभूत- तत्व पाठ आधार रेखा से संरेखित है
आपको सामान्य पंक्ति में किसी तत्व का क्रम (स्थिति, स्थिति) बदलने की अनुमति देता है।
डिफ़ॉल्ट: ऑर्डर: 0
डिफ़ॉल्ट रूप से, तत्वों का क्रम: 0 होता है और उन्हें HTML कोड में उनकी उपस्थिति और पंक्ति की दिशा के क्रम में रखा जाता है। लेकिन यदि आप ऑर्डर प्रॉपर्टी का मान बदलते हैं, तो तत्वों को मानों के क्रम में व्यवस्थित किया जाएगा: -1 0 1 2 3 ...। उदाहरण के लिए, यदि आप किसी एक तत्व के लिए क्रम: 1 निर्दिष्ट करते हैं, तो सभी शून्य पहले जाएंगे, और फिर 1 वाला तत्व जाएगा।
इस तरह, उदाहरण के लिए, आप शेष तत्वों या HTML कोड की गति की दिशा को बदले बिना पहले तत्व को अंत तक ले जा सकते हैं।
टिप्पणियाँ
फ्लेक्स-आधार और चौड़ाई के बीच क्या अंतर है?
फ्लेक्स-आधार और चौड़ाई/ऊंचाई के बीच महत्वपूर्ण अंतर नीचे दिए गए हैं:
- फ्लेक्स प्रॉपर्टी का उपयोग करते समय, 3 मानों (फ्लेक्स-ग्रो/फ्लेक्स-श्रिंक/फ्लेक्स-बेस) को जोड़ा जा सकता है और संक्षेप में लिखा जा सकता है, लेकिन चौड़ाई बढ़ने या सिकुड़ने के लिए आपको अलग से लिखना होगा। उदाहरण के लिए: फ्लेक्स:0 0 50% == चौड़ाई:50%; फ्लेक्स-सिकुड़ना:0; . कभी-कभी यह असुविधाजनक होता है।
फ्लेक्स-बेस केवल मुख्य अक्ष के लिए काम करता है। इसका मतलब यह है कि फ्लेक्स-दिशा के साथ: पंक्ति फ्लेक्स-आधार चौड़ाई को नियंत्रित करती है, और फ्लेक्स-दिशा के साथ: कॉलम ऊंचाई को नियंत्रित करता है। .
फ्लेक्स-आधार केवल फ्लेक्स तत्वों पर लागू होता है। इसका मतलब यह है कि यदि आप किसी कंटेनर के लिए फ्लेक्स को अक्षम करते हैं, तो इस संपत्ति का कोई प्रभाव नहीं पड़ेगा।
पूर्ण कंटेनर तत्व फ्लेक्स निर्माण में भाग नहीं लेते हैं... इसका मतलब यह है कि फ्लेक्स-आधार किसी कंटेनर के फ्लेक्स तत्वों को प्रभावित नहीं करता है यदि वे पूर्ण स्थिति: पूर्ण हैं। उन्हें चौड़ाई/ऊंचाई निर्दिष्ट करने की आवश्यकता होगी।
यदि संभव हो, तब भी फ्लेक्स-आधार को प्राथमिकता दें। चौड़ाई का उपयोग केवल तभी करें जब फ्लेक्स-आधार उपयुक्त न हो।
फ्लेक्स-आधार और चौड़ाई के बीच अंतर - एक बग या एक सुविधा?
फ्लेक्स तत्व के अंदर की सामग्री इसे धक्का देती है और इससे आगे नहीं जा सकती। हालाँकि, यदि आप flex-basis के बजाय width या max-width का उपयोग करके चौड़ाई निर्धारित करते हैं, तो फ्लेक्स कंटेनर के अंदर एक तत्व उस कंटेनर की सीमा से आगे बढ़ने में सक्षम होगा (कभी-कभी यह वही व्यवहार होता है जो आप चाहते हैं)। उदाहरण:
फ्लेक्स लेआउट उदाहरण
उदाहरणों में कहीं भी क्रॉस-ब्राउज़र संगतता के लिए उपसर्गों का उपयोग नहीं किया गया है। मैंने सीएसएस को आसानी से पढ़ने के लिए ऐसा किया। इसलिए, उदाहरण देखें नवीनतम संस्करणक्रोम या फ़ायरफ़ॉक्स.
#1 ऊर्ध्वाधर और क्षैतिज संरेखण के साथ सरल उदाहरण
आइए सबसे सरल उदाहरण से शुरू करें - एक ही समय में ऊर्ध्वाधर और क्षैतिज संरेखण और किसी भी ब्लॉक ऊंचाई पर, यहां तक कि रबर पर भी।
या इस तरह, बिना किसी ब्लॉक के:
#1.2 फ्लेक्स ब्लॉक तत्वों के बीच पृथक्करण (विराम)।
कंटेनर तत्वों को किनारों पर रखने के लिए और बेतरतीब ढंग से एक तत्व का चयन करने के लिए जिसके बाद एक ब्रेक होगा, आपको मार्जिन-लेफ्ट: ऑटो या मार्जिन-राइट: ऑटो प्रॉपर्टी का उपयोग करने की आवश्यकता है।
#2 फ्लेक्स पर अनुकूली मेनू
आइए पृष्ठ के सबसे ऊपर एक मेनू बनाएं। चौड़ी स्क्रीन पर यह दाईं ओर होना चाहिए। औसतन, बीच में संरेखित करें। और छोटे पर, प्रत्येक तत्व एक नई लाइन पर होना चाहिए।
#3 अनुकूली 3 कॉलम
यह उदाहरण दिखाता है कि कैसे जल्दी और आसानी से 3 कॉलम बनाए जाएं, जो संकुचित होने पर 2 और फिर 1 में बदल जाएंगे।
कृपया ध्यान दें कि यह मीडिया नियमों का उपयोग किए बिना किया जा सकता है, सब कुछ फ्लेक्स पर है।
jsfiddle.net पर जाएं और "परिणाम" अनुभाग की चौड़ाई बदलें
#4 फ्लेक्स का उपयोग कर अनुकूली ब्लॉक
मान लीजिए कि हमें 3 ब्लॉक आउटपुट करने की आवश्यकता है, एक बड़ा और दो छोटा। साथ ही, यह आवश्यक है कि ब्लॉक छोटी स्क्रीन के अनुकूल हों। क र ते हैं:
jsfiddle.net पर जाएं और "परिणाम" अनुभाग की चौड़ाई बदलें
#5 फ्लेक्स और ट्रांज़िशन वाली गैलरी
यह उदाहरण दिखाता है कि आप कितनी जल्दी फ्लेक्स का उपयोग करके चित्रों के साथ एक सुंदर अकॉर्डियन बना सकते हैं। फ्लेक्स के लिए संक्रमण गुण पर ध्यान दें।
#6 फ्लेक्स टू फ्लेक्स (सिर्फ एक उदाहरण)
कार्य एक लचीला ब्लॉक बनाना है। ताकि प्रत्येक ब्लॉक में पाठ की शुरुआत क्षैतिज रूप से एक ही पंक्ति पर हो। वे। जैसे-जैसे चौड़ाई कम होती जाती है, ब्लॉकों की ऊंचाई बढ़ती जाती है। यह आवश्यक है कि छवि शीर्ष पर हो, बटन हमेशा नीचे हो, और बीच में पाठ एक क्षैतिज रेखा के साथ शुरू हो...
इस समस्या को हल करने के लिए, ब्लॉकों को स्वयं फ्लेक्स द्वारा फैलाया जाता है और अधिकतम संभव चौड़ाई पर सेट किया जाता है। प्रत्येक आंतरिक ब्लॉक भी एक फ्लेक्स संरचना है, जिसमें एक घूर्णन अक्ष फ्लेक्स-दिशा: कॉलम होता है; और बीच में तत्व (जहां पाठ है) फैला हुआ है flex-grow:1; सभी खाली स्थान को भरने के लिए, परिणाम इस प्रकार प्राप्त किया जाता है - पाठ की शुरुआत एक पंक्ति से होती है...
और ज्यादा उदाहरण
ब्राउज़र समर्थन - 98.3%
बेशक, कोई पूर्ण समर्थन नहीं है, लेकिन सभी आधुनिक ब्राउज़र फ्लेक्सबॉक्स डिज़ाइन का समर्थन करते हैं। कुछ को अभी भी उपसर्गों की आवश्यकता है। वास्तविक तस्वीर के लिए, आइए caniuse.com पर नजर डालें और देखें कि आज उपयोग किए जाने वाले 96.3% ब्राउज़र उपसर्गों के बिना काम करेंगे, और 98.3% उपसर्गों के साथ काम करेंगे। फ्लेक्सबॉक्स का आत्मविश्वास से उपयोग करने के लिए यह एक उत्कृष्ट संकेतक है।
यह जानने के लिए कि कौन से उपसर्ग आज (जून 2019) प्रासंगिक हैं, मैं सभी फ्लेक्स नियमों का एक उदाहरण दूंगा आवश्यक उपसर्गों के साथ:
/* कंटेनर */ .फ्लेक्स ( डिस्प्ले:-वेबकिट-बॉक्स; डिस्प्ले:-एमएस-फ्लेक्सबॉक्स; डिस्प्ले:फ्लेक्स; डिस्प्ले:-वेबकिट-इनलाइन-बॉक्स; डिस्प्ले:-एमएस-इनलाइन-फ्लेक्सबॉक्स; डिस्प्ले:इनलाइन-फ्लेक्स; -वेबकिट-बॉक्स-ओरिएंट: वर्टिकल; -एमएस-फ्लेक्स-रैप: रैप; -फ्लेक्स-फ्लो: कॉलम रैप; -एमएस-फ्लेक्स-पैक; :जस्टिफ़ाइ; वितरित; संरेखित-सामग्री:स्थान-चारों ओर; ) /* तत्व */ .फ्लेक्स-आइटम (-वेबकिट-बॉक्स-फ्लेक्स:1; -एमएस-फ्लेक्स-पॉजिटिव:1; फ्लेक्स-ग्रो:1; -एमएस) -फ्लेक्स-नकारात्मक:2; -एमएस-फ्लेक्स-पसंदीदा-आकार:100पीएक्स; -एमएस-फ्लेक्स:1 2 100पीएक्स; :3; -एमएस-फ्लेक्स-ऑर्डर:2);
यदि उपसर्ग वाले गुण मूल गुण से पहले हों तो बेहतर है।
इस सूची में कोई भी उपसर्ग शामिल नहीं है जो आज अनावश्यक है (कैन्यूज़ के अनुसार), लेकिन सामान्य तौर पर अधिक उपसर्ग हैं।
| क्रोम | सफारी | फ़ायरफ़ॉक्स | ओपेरा | अर्थात। | एंड्रॉयड | आईओएस |
|---|---|---|---|---|---|---|
| 20- (पुराना) | 3.1+ (पुराना) | 2-21 (पुराना) | 10 (ट्विनर) | 2.1+ (पुराना) | 3.2+ (पुराना) | |
| 21+ (नया) | 6.1+ (नया) | 22+ (नया) | 12.1+ (नया) | 11+ (नया) | 4.4+ (नया) | 7.1+ (नया) |
- (नया) - नया सिंटैक्स: डिस्प्ले: फ्लेक्स; .
- (ट्विनर) - 2011 से पुराना अनौपचारिक वाक्यविन्यास: डिस्प्ले: फ्लेक्सबॉक्स; .
- (पुराना) - 2009 से पुराना सिंटैक्स: डिस्प्ले: बॉक्स;
वीडियो
खैर, वीडियो के बारे में मत भूलिए, कभी-कभी यह दिलचस्प और समझने योग्य भी होता है। यहाँ कुछ लोकप्रिय हैं:
फ्लेक्स पर उपयोगी लिंक
flexboxfroggy.com - फ्लेक्सबॉक्स शैक्षणिक गेम।
फ्लेक्सप्लोरर एक विज़ुअल फ्लेक्स कोड बिल्डर है।
कुछ भी स्थिर नहीं है, प्रौद्योगिकियां और मानक विकसित हो रहे हैं, वेबसाइट लेआउट के लिए नई तकनीकें और तरीके सामने आ रहे हैं, उदाहरण के लिए, सारणीबद्ध तत्वों वाला लेआउट, जिस पर हमने वस्तुनिष्ठ कारणों से विचार नहीं किया था, उसे फ्लोटिंग तत्वों वाले लेआउट से बदल दिया गया है।
कई कोड संपादकों के पास एक सुविधाजनक त्वरित मार्कअप प्लगइन अंतर्निहित है या डिफ़ॉल्ट रूप से डाउनलोड के लिए उपलब्ध है, एम्मेट, जो आपको इस उदाहरण का मूल मार्कअप निम्नानुसार करने की अनुमति देता है: अनुभाग>div*3>लोरेम+ टैब (मान लोरेमवह पाठ उत्पन्न करता है जो नीचे दी गई छवि में दिखाई देता है)।
कृपया ध्यान दें कि बिना किसी विशेष प्रयास के, हमने अपने लेआउट के कॉलमों को उनकी सामग्री की परवाह किए बिना समान ऊंचाई पर प्राप्त किया, और यह बहुत अच्छा है। तत्वों
डिफ़ॉल्ट रूप से फ्लेक्स तत्व नहीं हैं और प्रवाह में स्थित हैं तीसरातत्व
हमारे उदाहरण का परिणाम:
इनलाइन फ्लेक्स कंटेनर
ब्लॉक तत्वों के अनुरूप, फ्लेक्स कंटेनर इनलाइन हो सकते हैं। आइए इनलाइन फ्लेक्स कंटेनर और ब्लॉक वाले के बीच अंतर देखें। पिछले उदाहरण में, हमने एक ब्लॉक-स्तरीय कंटेनर के उपयोग को देखा, एक नियमित ब्लॉक-स्तरीय तत्व की तरह यह स्क्रीन की पूरी चौड़ाई पर कब्जा कर लेता है, और एक नियमित ब्लॉक-स्तरीय तत्व की तरह व्यवहार करता है। जहां तक इनलाइन फ्लेक्स कंटेनरों की बात है, वे तत्वों के लचीलेपन को बनाए रखते हुए नियमित इनलाइन तत्व बन जाते हैं।
अगले उदाहरण में हम इस अंतर को देखेंगे, क्योंकि पिछला उदाहरण सांकेतिक नहीं होगा, इस कारण से कि चाइल्ड फ्लेक्स तत्वों को स्पष्ट रूप से कोई आकार नहीं दिया गया था, और परिणामस्वरूप, हमारा कंटेनर, चाहे वह इनलाइन हो या ब्लॉक, समान व्यवहार करेगा और स्क्रीन की पूरी चौड़ाई लेगा।
इस उदाहरण में हमने रखा है दोलोअरकेस और दोफ्लेक्स कंटेनरों को ब्लॉक करें, हमने उनके अंदर रखा पाँचतत्वों
का उपयोग करके शीघ्रता से एक समान लेआउट तैयार करना चिंउंटीसंपादक में निम्नलिखित टाइप करें: div.inline-flex*2>div*5 + Tab , और यही चीज़ केवल अन्य वर्ग div.flex*2>div*5 + Tab के साथ।
हमारे उदाहरण के परिणाम पर एक नज़र डालें, इनलाइन और ब्लॉक फ्लेक्स कंटेनरों के बीच का अंतर अब आपके लिए स्पष्ट होना चाहिए। एक इनलाइन कंटेनर एक इनलाइन तत्व की तरह व्यवहार करता है और केवल अपने चाइल्ड फ्लेक्स तत्वों के लिए आवश्यक चौड़ाई पर कब्जा करता है, जबकि एक ब्लॉक फ्लेक्स कंटेनर, अपने चाइल्ड फ्लेक्स तत्वों के आकार के बावजूद, स्क्रीन की पूरी चौड़ाई पर कब्जा करता है।
हमारे उदाहरण का परिणाम:
चावल। 205 इनलाइन-फ्लेक्स कंटेनर और फ्लेक्स कंटेनर के बीच अंतर का एक उदाहरण।
दिशा? किस दिशा में?
फ्लेक्स तत्वों की दिशा दो अक्षों की स्थिति के आधार पर बनती है: मुख्य धुरीफ्लेक्स कंटेनर और उसके अनुप्रस्थ अक्ष, जो सदैव स्थित रहता है मुख्य के लंबवत. दिशा में मुख्य अक्ष लीटर (वैश्विक) HTML विशेषता dir , या CSS दिशा गुण ltr मान के साथ) बाएँ से दाएँ स्थित होता है, और क्रॉस एक ऊपर से नीचे की ओर होता है (यह डिफ़ॉल्ट मान है), rtl मान के लिए इसे तदनुसार दर्पण में प्रदर्शित किया जाता है।
वास्तविक रूप के उदाहरण का उपयोग करना परीक्षण कार्य, मैं तुम्हें दिखाऊंगा कि टाइपसेट कैसे किया जाता है कार्यलयका उपयोग करते हुए फ्लेक्सबॉक्स. आप पूछ सकते हैं: "इसके अनुसार टाइप करना क्यों आवश्यक है?" बीईएम + फ्लेक्सबॉक्स?" यह आवश्यकता नियोक्ता से आती है। कार्य के विवरण से उद्धरण: "बिना फ्रेमवर्क के टाइपसेटिंग करने का प्रयास करें (अधिमानतः पर) फ्लेक्सबॉक्स), सरल और स्पष्ट: बोझिल संरचनाओं और अनावश्यक कोड से बचें, कार्यप्रणाली का उपयोग करें कार्यलय."
एक प्रपत्र के साथ एक अनुभाग लेआउट का टुकड़ा
मेरे लेआउट नियम
- लेआउट को तार्किक अनुभागों में विभाजित करें
- प्रत्येक अनुभाग को एक टैग से प्रारंभ करें अनुभाग
- अलग अनुभाग और सीएसएसएक दूसरे से शासित, खाली लाइन
- प्रत्येक टैग को एक वर्ग निर्दिष्ट करें
- किसी ब्लॉक या तत्व के लिए वर्ग का नाम, प्रश्न का उत्तर देता है - यह क्या है?
- संशोधक नाम प्रश्न का उत्तर देता है - कौन?
HTML मार्कअप
सबसे पहले, मैं मार्कअप बनाता हूं, ब्लॉकों की नेस्टिंग निर्धारित करता हूं और कक्षाओं के लिए नाम लेकर आता हूं। नीचे दिए गए कोड में, हमारे पास दो इनलाइन टैग हैं - एच 2और इनपुट. इनलाइन टैग शुरुआती लेआउट डिजाइनरों के लिए सिरदर्द और तनाव का कारण हैं। क्यों? वे बहुत बुरा व्यवहार करते हैं - वे पूरी उपलब्ध चौड़ाई लेने की कोशिश करते हैं, और आपको पूरे ब्लॉक का पृष्ठभूमि रंग और आयाम सेट करने की अनुमति नहीं देते हैं।
व्यक्तिगत जानकारी
इस मामले में एक ख़राब लेआउट डिज़ाइनर क्या करता है? यह इनलाइन तत्वों को ब्लॉक टैग में लपेटता है डिवऔर सभी आवश्यक गुणों को रैपर टैग पर सेट करता है। चाइल्ड इनलाइन तत्व इन गुणों को प्राप्त करते हैं। क्या अतिरिक्त कोड का उपद्रव करना उचित है? एक सक्षम लेआउट डिज़ाइनर क्या करेगा? यह इनलाइन तत्व को ब्लॉक या इनलाइन-ब्लॉक में फिर से परिभाषित करेगा सीएसएसनियम
प्रदर्शन क्षेत्र; // इनपुट टैग के लिए
प्रदर्शन: इनलाइन-ब्लॉक; // h2 टैग के लिए
नेस्टिंग तर्क और ब्लॉक नाम
हम व्यक्तिगत जानकारी वाला एक अनुभाग देखते हैं, इसलिए हम अनुभाग को वर्ग कहते हैं - जानकारी. एक अनुभाग में तीन बाल तत्व होते हैं:
चिह्न // कक्षा का नाम जानकारी__आइकॉन
शीर्षक // जानकारी__शीर्षक
प्रपत्र //info__form
बात कक्षाओं के नाम में है कार्यलय, एक बच्चे के तत्व का माता-पिता से संबंध होता है। तत्व का नाम नहीं दिया जा सकता आइकन. यह सिर्फ कोई आइकन नहीं है, बल्कि अनुभाग से एक आइकन है जानकारी.
बेटी और माता-पिता एक हो गए
अवरोध पैदा करना जानकारी__प्रपत्र, हमारे पास एक विशेष है - यह अनुभाग में निहित है जानकारी, लेकिन साथ ही, इसमें फॉर्म फ़ील्ड भी शामिल हैं। इस घटना का नाम मल्टी-लेवल नेस्टिंग है। फॉर्म वाले ब्लॉक में इनपुट के लिए पूरी तरह से रैपर फ़ंक्शन होता है, ताकि आप आसानी से बाहरी मार्जिन सेट कर सकें। आख़िरकार, लोअरकेस इनपुट बच्चों की तरह व्यवहार करते हैं (जो वे हैं), वे बिल्कुल भी पालन नहीं करते हैं। इसके अलावा, दूसरा इनपुट अन्य सभी की तुलना में छोटा है और केवल चौड़ाई में भिन्न है।
हम चौड़ाई को छोड़कर, समान गुणों वाले सभी इनपुट के लिए एक वर्ग निर्धारित करते हैं - जानकारी__इनपुट. नियमित इनपुट के लिए, एक संशोधक जोड़ें जानकारी__इनपुट_लंबा, और संक्षिप्त इनपुट को एक संशोधक दिया गया है info__input_short. मैं आपको याद दिला दूं कि संशोधक कार्यलय, प्रश्न का उत्तर देना चाहिए - कौन?
संशोधक के लिए सीएसएस नियम
.info__input_long(चौड़ाई: 520px;
}
जानकारी__input_short(
चौड़ाई: 320px;
}
सीएसएस कोड
में एचटीएमएलमार्कअप साइट की एक रफ संरचना बनाता है सीएसएस, हम पहले से ही तत्वों को लेआउट के अनुसार रख रहे हैं। आज हम उपस्थिति पर ध्यान नहीं देंगे, बल्कि तत्वों की स्थिति पर ध्यान देंगे। हमारे अनुभाग में, दो फ्लेक्स कंटेनर हैं। यह कहा जाना चाहिए कि फ्लेक्स का उपयोग, जब सभी तत्व एक समय में एक पंक्ति में स्थित होते हैं, बहुत संदिग्ध होता है। एकमात्र लाभ जो मिलता है वह है संपत्ति औचित्य-सामग्री, केंद्र संरेखित, लचीले तत्व। मैं अपने बचाव में कह सकता हूं कि फ्लेक्स का विचार केवल इस खंड के संदर्भ में निरर्थक है। लेआउट के लिए एक वास्तविक लेआउट में आमतौर पर अधिक विविधता होती है।
जानकारी (
प्रदर्शन: फ्लेक्स;
औचित्य-सामग्री: केंद्र;
संरेखित-आइटम: केंद्र;
फ्लेक्स-दिशा: स्तंभ;
मार्जिन-टॉप: 77px;
ऊंचाई: 100%;
}
जानकारी__प्रपत्र(
प्रदर्शन: फ्लेक्स;
औचित्य-सामग्री: केंद्र;
फ्लेक्स-दिशा: स्तंभ;
ऊंचाई: 100%;
मार्जिन-टॉप: 50px;
