दिलचस्प पोस्ट
सी # में प्रारूप की तारीख एक Django प्रपत्र में, मैं एक फ़ील्ड को केवल पढ़ने के लिए (या अक्षम) कैसे कर सकता हूं ताकि इसे संपादित नहीं किया जा सके? कुछ परियोजनाओं को आयात नहीं किया जा सकता क्योंकि वे पहले से ही एक्लिप्से में कार्यस्थान त्रुटि में मौजूद हैं एंड्रॉइड एप्लिकेशन को अग्रभूमि में चेक करना है या नहीं? कौन सी सबसे अच्छी विधि स्क्रिप्ट को दोहराव से आर। में सीसीवी फाइलों पर लागू करने के लिए है? अजगर में एक शब्द की दीप प्रतिलिपि मानक UIButton में मैं बैज कैसे जोड़ सकता हूं? स्विफ्ट जेनेरिक नहीं प्रकार संरक्षण पायथन के लिए टिनकिनटर स्थापित करें CardView के लिए OnClickListener? लीगसी कोड बेस को सीवीएस से डिस्ट्रीब्यूटेड रिपॉजिटरी में स्थानांतरित करना (जैसे कि git या मर्काइकल) शुरुआती भंडार डिजाइन के लिए आवश्यक सुझाव एक MySQL तालिका, अनुक्रमित और डेटा को डुप्लिकेट करना एनएटी / सी # में प्रवेश के लिए बड़ी संख्या में रिकॉर्ड (बल्क डाट) लिखना Google chrome rehost छवि एक्सटेंशन बूटस्ट्रैप – <td> के लिए निश्चित चौड़ाई कैसे तय की जाए?

संरेखित करें-स्व, संरेखित-आइटम और संरेखित-सामग्री के साथ फ्लेक्स-रैप काम कैसे करता है?

align-self

निम्नलिखित कोड में, flex-wrap: nowrap साथ align-self काम करता है flex-wrap: nowrap

यहां छवि विवरण दर्ज करें

 flex-container { display: flex; flex-wrap: nowrap; align-content: flex-start; width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } flex-item:last-child { align-self: flex-end; background-color: crimson; } 
 <flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-container> 

लेकिन जब कंटेनर को flex-wrap: wrap करने के लिए स्विच किया जाता है flex-wrap: wrap , align-self संपत्ति विफल हो जाती है।

यहां छवि विवरण दर्ज करें

 flex-container { display: flex; flex-wrap: wrap; align-content: flex-start; width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } flex-item:last-child { align-self: flex-end; background-color: crimson; } 
 <flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-container> 


align-items

इसी प्रकार, align-items यहां क्यों काम करती हैं (अक्षम हैं):

यहां छवि विवरण दर्ज करें

 flex-container { display: flex; flex-wrap: nowrap; align-items: flex-end; align-content: flex-start; width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } 
 <flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-container> 

… लेकिन यहां नहीं (लपेटो सक्षम):

यहां छवि विवरण दर्ज करें

 flex-container { display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-start; width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } 
 <flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-container> 


align-content

flex-wrap: nowrap , align-content संपत्ति यहां लंबवत वस्तुओं को केंद्र में नहीं खड़ी करेगी:

यहां छवि विवरण दर्ज करें

 flex-container { display: flex; flex-wrap: nowrap; align-content: center; width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } 
 <flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-container> 

लेकिन फिर, अजीब तरह से, अगर लपेटें सक्षम और align-content छोड़ दी जाती है, तो कंटेनर पंक्तियों के बीच व्यापक अंतराल बनाता है:

यहां छवि विवरण दर्ज करें

 flex-container { display: flex; flex-wrap: wrap; /* align-content: center; */ width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } 
 <flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-container> 

और align-self फिर से काम करता है

यहां छवि विवरण दर्ज करें

 flex-container { display: flex; flex-wrap: wrap; /* align-content: center; */ width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } flex-item:nth-child(even) { align-self: flex-end; background-color: crimson; } 
 <flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-container> 

align-self , align-items और align-content? साथ flex-wrap काम कैसे करता align-content?

Solutions Collecting From Web of "संरेखित करें-स्व, संरेखित-आइटम और संरेखित-सामग्री के साथ फ्लेक्स-रैप काम कैसे करता है?"

संक्षिप्त जवाब

यद्यपि flex-wrap प्रॉपर्टी बहुत बुनियादी लगती है – यह नियंत्रित करती है कि फ्लेक्स आइटम लपेटते हैं या नहीं – यह वास्तव में संपूर्ण फ्लेक्सबॉक्स लेआउट पर व्यापक प्रभाव डालता है

flex-wrap प्रॉपर्टी आपको फ्लेक्स कंटेनर के प्रकार का उपयोग करने के लिए निर्धारित करती है।

  • flex-wrap: nowrap एक सिंगल-लाइन फ्लेक्स कंटेनर बनाता है
  • flex-wrap: wrap और wrap-reverse एक मल्टी-लाइन फ्लेक्स कंटेनर बनाएँ

align-items और align-self गुण एकल और बहु-लाइन कंटेनरों दोनों में काम करते हैं। हालांकि, फ्लेक्स लाइन के क्रॉस अक्ष में निशुल्क स्थान होने पर उनका केवल एक प्रभाव हो सकता है।

align-content संपत्ति केवल बहु-लाइन कंटेनरों में ही काम करती है इसे एकल-लाइन कंटेनरों में अनदेखा किया गया है


व्याख्या

फ्लेक्स बॉक्स विनिर्देश फ्लेक्स आइटम को संरेखित करने के लिए चार कीवर्ड गुण प्रदान करता है:

  • align-items
  • align-self
  • align-content
  • justify-content

इन गुणों के कार्यों को समझने के लिए, पहले फ्लेक्स कंटेनर की संरचना को समझना महत्वपूर्ण है।


भाग 1: फ्लेक्स कंटेनर के मुख्य अक्ष और क्रॉस एक्सिस को समझना

एक्स और वाई एक्सिस

एक फ्लेक्स कंटेनर दो दिशाओं में काम करता है: एक्स-अक्ष (क्षैतिज) और वाई-अक्ष (ऊर्ध्वाधर)।

एक्स-अक्ष और y- अक्ष

स्रोत: विकिपीडिया

एक फ्लेक्स कंटेनर के बच्चे तत्व – जिसे "फ्लेक्स आइटम" के रूप में जाना जाता है – दोनों दिशाओं में गठबंधन किया जा सकता है।

यह अपने मूलभूत स्तर पर फ्लेक्स संरेखण है

मुख्य और क्रॉस एक्सिस

एक्स और वाई अक्षों को ओवरलेक्शन करना, फ्लेक्स लेआउट में, मुख्य और पार अक्ष

डिफ़ॉल्ट रूप से, मुख्य अक्ष क्षैतिज (एक्स-अक्ष) है, और क्रॉस अक्ष ऊर्ध्वाधर (y- अक्ष) है। यह प्रारंभिक सेटिंग है, जैसा कि फ्लेक्सबॉक्स विनिर्देश द्वारा परिभाषित किया गया है।

फ्लेक्स मुख्य अक्ष और क्रॉस अक्ष

स्रोत: डब्लू 3 सी

हालांकि, एक्स और वाई अक्षों के विपरीत, जो तय हो गए हैं, मुख्य और क्रॉस ऐश दिशाओं को बदल सकते हैं।

flex-direction संपत्ति

ऊपर की छवि में, मुख्य अक्ष क्षैतिज है और क्रॉस अक्ष वर्टिकल है। जैसा कि पहले उल्लेख किया गया है, यह एक फ्लेक्स कंटेनर की प्रारंभिक सेटिंग है

हालांकि, इन निर्देशों को आसानी से flex-direction संपत्ति के साथ स्विच किया जा सकता है यह संपत्ति मुख्य अक्ष की दिशा को नियंत्रित करती है; यह निर्धारित करता है कि फ्लेक्स आइटम खड़ी या क्षैतिज रूप से संरेखित करें

कल्पना से:

5.1। फ्लेक्स फ्लो निर्देश: flex-direction संपत्ति

flex-direction संपत्ति फ्लेक्स कंटेनर के मुख्य अक्ष की दिशा निर्धारित करके फ्लेक्स कंटेनर में फ्लेक्स आइटम कैसे रखी जाती है, यह निर्दिष्ट करती है। यह उस दिशा को निर्धारित करता है जिसमें फ्लेक्स आइटम रखे जाते हैं।

flex-direction संपत्ति के लिए चार मान हैं:

 /* main axis is horizontal, cross axis is vertical */ flex-direction: row; /* default */ flex-direction: row-reverse; /* main axis is vertical, cross axis is horizontal */ flex-direction: column; flex-direction: column-reverse; 

क्रॉस अक्ष हमेशा मुख्य अक्ष के लिए लंबवत होता है।


भाग 2: फ्लेक्स लाइन्स

कंटेनर के भीतर, फ्लेक्स आइटम एक पंक्ति में मौजूद हैं, जिसे "फ्लेक्स लाइन" के रूप में जाना जाता है

flex-direction आधार पर एक फ्लेक्स लाइन एक पंक्ति या स्तंभ होती है

flex-wrap आधार पर एक कंटेनर में एक या अधिक पंक्तियां हो सकती हैं

सिंगल लाइन फ्लेक्स कंटेनर

flex-wrap: nowrap एक सिंगल-लाइन फ्लेक्स कन्टेनर को स्थापित करता है, जिसमें फ्लेक्स आइटम को एक पंक्ति में रहने के लिए मजबूर किया जाता है (भले ही वे कंटेनर से अधिक हो जाएं)।

एक एकल लाइन फ्लेक्स कंटेनर (एक स्तंभ)

ऊपर की छवि में एक फ्लेक्स लाइन है

 flex-container { display: flex; flex-direction: column; flex-wrap: nowrap; /* <-- allows single-line flex container */ width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; width: 50px; margin: 5px; background-color: lightgreen; } 
 <flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-container> 

सबसे पहले, संरेखण सामग्री बेकार है यदि कोई लपेट नहीं है:

w3c डॉक्टर

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

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

 flex-container { display: flex; flex-wrap: wrap; align-content: flex-start; width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } flex-item:last-child { align-self: flex-end; background-color: crimson; } flex-item:nth-child(5) { height: 90px; /* added */ } 
 <flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-container>