CSS संपत्ति चुनने से पहले अक्ष की पहचान करें
स्तर के लक्ष्य लिली पैड पढ़ें और मेंढकों की वर्तमान व्यवस्था का निरीक्षण करें। डिफ़ॉल्ट पंक्ति दिशा में, justify-content क्षैतिज मुख्य अक्ष के साथ और align-items ऊर्ध्वाधर क्रॉस अक्ष के साथ काम करता है। कोई मान टाइप करने से पहले, बताएं कि आप कौन सा अक्ष बदलना चाहते हैं। यह आदत एक सामान्य गलती को रोकती है: किसी संपत्ति के लिए सही दिखने वाला मूल्य चुनना जो एक अलग दिशा को नियंत्रित करता है।
जब flex-direction कॉलम में बदलता है, तो मुख्य और क्रॉस अक्ष इसके साथ बदल जाते हैं। यह मानने के बजाय कि justify-content का मतलब हमेशा क्षैतिज गति होता है, संपत्ति का पुनर्मूल्यांकन करें। संपादक में एक CSS परिवर्तन दर्ज करें और परिणामी स्थिति की तुलना लक्ष्य से करें। मेंढ़कों को आपके CSS द्वारा स्थित किया जाता है, खींचकर जगह पर नहीं रखा जाता है। प्रयोग को वास्तव में दिखाए गए कार्य से जोड़े रखने के लिए स्तर के संकेतों और अनुमत गुणों का उपयोग करें।
दूसरा प्रयास करने से पहले एक असफल परिवर्तन के बारे में बताएं
परिवर्तन के बाद लक्ष्य चूक जाता है, पूछें कि क्या संपत्ति ने गलत अक्ष को प्रभावित किया है, चुने गए मूल्य ने वस्तुओं को आपकी अपेक्षा से अलग तरीके से व्यवस्थित किया है, या वर्तमान दिशा ने लेआउट का अर्थ बदल दिया है। नियम का जो हिस्सा आपको समझ में आ जाए उसे अपने पास रखें और एक चीज को रिवाइज कर लें। एक साथ कई संपत्तियों को बदलने से लक्ष्य तक पहुंचा जा सकता है, जबकि आप अनिश्चित हो जाते हैं कि किस परिवर्तन से समस्या हल हो गई।
समीक्षा अभ्यास के लिए, आगे बढ़ने से पहले शब्दों में सफल नियम का वर्णन करें: इसने किस अक्ष का उपयोग किया और इसने लिली पैड के सापेक्ष मेंढ़कों को कैसे स्थित किया। बाद के स्तर विचारों को जोड़ सकते हैं, इसलिए यह स्पष्टीकरण किसी पंक्ति को उसके संदर्भ के बिना याद करने की तुलना में अधिक उपयोगी है। यह मार्गदर्शिका कोई आविष्कृत संपूर्ण उत्तर सूची प्रदान नहीं करती है या यह दावा नहीं करती है कि गेम को हल करना पेशेवर CSS कौशल को प्रमाणित करता है। लिंक किया गया प्ले पेज संपादक को नियंत्रण और सटीक कार्य फ़्रेमिंग देता है; केंद्र उन स्तरों पर समझ और अभ्यास का समर्थन करता है जिनका आप वास्तव में सामना करते हैं।
उदाहरण के लिए, यदि कोई नियम आपके क्षैतिज आंदोलन के दौरान मेंढकों को लंबवत रूप से बदलता है, तो flex-direction का निरीक्षण करें और किसी अन्य मान का चयन करने से पहले वर्तमान मुख्य अक्ष की पहचान करें। संबंध को ज़ोर से कहें: यह गुण मुख्य अक्ष के साथ वितरण को बदलता है, और मुख्य अक्ष वर्तमान में इसी दिशा में चलता है। फिर एक संपादन करें और परिणाम का निरीक्षण करें। एक बार जब यह काम कर जाए, तो दृश्यमान लिली पैड के विरुद्ध अपने स्पष्टीकरण का परीक्षण करें। यह एक असफल अनुमान को एक पुन: प्रयोज्य लेआउट विचार में बदल देता है बजाय उस आदेश के जिसे आप केवल एक स्क्रीन के लिए याद रखते हैं।
Flexbox Froggy टिप्स और स्ट्रेटेजी
अगली बाज़ी में अभ्यास करने के लिए कोई सुझाव चुनें। यह सूची खेल में बदलाव नहीं करती और खेल की प्रगति सहेजती नहीं है।
Flexbox Froggy सवाल और जवाब
क्या मुझे कोडिंग टूल इंस्टॉल करने की ज़रूरत है?
नहीं। CSS एडिटर ब्राउज़र गेम के अंदर है।
क्या यह पूरा वेब-डेवलपमेंट कोर्स है?
यह फ्लेक्सबॉक्स लेआउट कॉन्सेप्ट के लिए एक इंटरैक्टिव प्रैक्टिस गेम है। यह किसी बड़े HTML और CSS कोर्स की जगह नहीं लेता है।
प्रोजेक्ट किसने बनाया?
Thomas Park ने Flexbox Froggy बनाया। सोर्स MIT-लाइसेंस्ड है और रिकॉर्डेड आर्टवर्क में CC BY 3.0 का इस्तेमाल किया गया है; एट्रिब्यूशन लिंक नीचे दिए गए हैं।
दिशा पलटने पर flex-end दूसरी ओर क्यों ले जाता है?
शुरुआत और अंत मुख्य अक्ष पर निर्भर हैं, तय बाएँ और दाएँ किनारों पर नहीं। row-reverse में अक्ष दाईं ओर शुरू होता है, इसलिए justify-content: flex-end बाईं ओर रखता है। पहले flex-direction जाँचें। align-items दूसरे, क्रॉस अक्ष को बदलता है और अलग स्थान की समस्या हल करता है।
नियंत्रण और पूरे खेल के निर्देश
नियंत्रण और पूरे खेल के निर्देश
Flexbox Froggy खेलें