गैस आज के इस वीडियो में हम लोग देखने वाले हैं Flexbox के बारे में और Flexbox एक बहुत important topic है जहां पर CSS की बात आती है और यह एसी चीज� और एक्चुअल में इस्तेमाल करेंगे हमने बहुत सारी चीजें देखिए फ्लोट्स देखे हमने उसी के साथ हमने डिस्प्ले प्रॉपर्टीज वगैरह देखिए जब भी आप लेट डिजाइन करते हैं तो फ्लैक्स बॉक्स एक बहुत ही अच्छी चीज है लेट तो एक रोया कॉलम में आइटम्स को अलाइन करने में मदद करता है अब यह तो हमने अभी बात की थोड़ी देर पहले लेकिन कैसे करता है क्या कोड है किस तरह से प्रॉपर्टीजेंस की वह सब देखेंगे अभी थोड़ी देर में उससे पहले सीएसस का ही पार्ट है ठीक है यह जस्ट एक बेटर वेट वह लाइन आइटम से कंटेनर के अंदर और इसका नाम फ्लैक्स जाता है फ्लेक्सिबल का मतलब जिस चीज को चेंज किया जा सकता है फ्लेक्सिबिलिटी का मतलब होता है चुकी अपने आपको चेंज करने में अनुखूल इनवायरमेंट के हिसाब से अपने आपको चेंज कर ले ठीक है चलो यह तो सब चीजें हो गई इसके बारे में इसके नाम के बारे में अब यहां पर जरा सा एक हल्की थे थे लेते हैं थोड़ी सी बोर लग सकती है लेकिन ज्यादा बोर करूंगा नहीं ठीक है तो यह इमेज है हमारी और मोजिला mdn की डॉक्यूमेंटेशन में से यहां होती है प्रमारीली एक फ्लैक्स कंटेनर और उसके अंदर आइटम्स फ्लैक्स कंटेनर एक है उसके अंदर कितने भी आइटम्स हो सकते हैं एक फ्लैक्स कंटेनर बनाने के लिए हमें ज्यादा कुछ नहीं करना होता है बस डिस्प्ले उसकी फ्लैक्स प्रोजर को यह जानकारी दे दी यह संकेत दी दिया कि यह एक फ्लैक्स बॉक्स है तो इसको फ्लैक्स बॉक्स की तरह बना लिया है जो हमारा यह लोग बैकग्राउंड में यह आपका फ्लैक्स कंटेनर यूज जो ब्लू बैकग्राउंड में यह आपका फ्लैक्स आइटम है ठीक है एक बार आपने यह दे दिया अपने आपको अपने ब्राउजर को संकेत दे दिया कि यह अपने फ्लैक्स बॉक्स डिक्लीएर कर दिया डिस्प्ली मेन एक्सेस क्या होता है, क्रॉस एक्सेस क्या होता है, यह जो horizontal है, यह होती है मेन एक्सेस, और यह जो vertical है, यह होती है क्रॉस एक्सेस, ठीक है, तो मेन एक्सेस, क्रॉस एक्सेस, उसे के साथ साथ यह मेन start है, यह मेन end है, यह cross start है, यह cross end है, ठीक है, और ये main size है, ये cross size है, जो आपका flex item है, उसकी जो weight था, वो main size है, और ये cross size है, ये सब terminology है, ठीक है, और इतना है बस, इस ज़्यादा कुछ नहीं, ज़्यादा आपको, मैं ये नहीं कहूँगा, याद कर लो, कुछ कर लो, अब मैं सीधे code में ले कर जाओंगा, आपको और आप देखा हूंगा क्योंकि flexbox बनाई सुविधा के लिए आप सुविधा के लिए नहीं बनाई है flexbox सुविधा के लिए बनाई है flexbox एक ऐसी चीज़ है जिसकी दो तीन चार पांच property लगा गया है इसलिए बनाई गई है flexbox तो यहाँ पर हमने उन दो access की बात कर ली जिसमें आपके elements जो हैं वो laid out होते हैं तो अब चलते हैं जल्दी से code में जल्दी से file बनाते हैं और coding चालू करते हैं क्योंकि इस थेोरी में flexbox समझना गैस यहाँ पर मैं आ चुका हूँ अपने visual studio code के अंदर और यहाँ Visual Studio Code में आने के बाद एक नई फाइल बनाओंगा उसका नाम रखने वाला हूँ tu28.html और यह करने के साथ साथ मैं यहाँ पर Flexbox Tutorial लिख देता हूँ और यहाँ पर Live Server चालू गरता हूँ लेकिन Live Server चालू गरने से पहले जरुरा स्टाइल टैक लगा लेता हूँ और एक हेडिंग लगा लेता हूँ अजय को कि सेव किया मैंने गो लाइफ पर क्लिक करूंगा और यह मेरा लाइफ सर्वर स्टार्ट कर देगा तो यहां पर मेरा लाइफ सर्वर स्टार्ट हो चुका है और यह दिस्ट लाइफ ट्रिप्ट लिखकर आ रहा है कि साथ मैंने कुछ किया भी है ठीक है तो सबसे वह म बनाऊंगा सिंपल सा कुछ ज्यादा काम नहीं कर रहा हूं डिव डॉट कंटेनर बना रहा हूं और इस कंटेनर के अंदर मैं और डॉलर की जगह 1, 2, 3, 4, 5 आ जाएगा, ठीक है, तो मैंने ये किया तो इस तरह से आ जाएगा, तो मैं यहाँ पर लिख दूँगा first box, यहाँ पर लिख दूँगा second box, यहाँ पर लिख दूँगा third box, यहाँ पर लिख दूँगा fourth box, यहाँ पर लिख दूँगा fifth box, और यह अब यहाँ पर एक बात बताता हूँ आप लोगों को अभी इसकी डिस्प्ले क्या है सबसे पहले आप लोगों से सवाल है इसकी डिस्प्ले क्या है और आप लोग बोलेंगे ब्लॉक है बिल्कुल सही बोलेंगे गलत नहीं है इसकी डिस्प्ले बिल्कुल ब्लॉक है यह डि� और यहाँ पर लेकर जाओं आपको, display देख लो क्या इसकी block है, तो यह एक block element है, ठीक है, और यह पूरा अपना जो वेट तो वो ले लेता है, यह हमने बात करी थी पहले भी, inline होता अगर मैं इस tree display को inline कर देता, मैं जल्दी से revise करवा रहा हूँ, inline, block और यह सब चीज़े, है तो क्या होगा कि आज बाजु में आ जाएगा तो इसके इतना गया कि मैंने इसको इन लाइन एलेमेंट बना दिया ठीक है तो इन लाइन इन लाइन ब्लॉक इस चीज हमने बात कर ली थी ऑलरेडी इसको रिप्रेश कर देता हूं तो इसी स्टाइलिंग आविट देता हूं इसको विट क्या दूं कंटेनर को मैं हाइट दिए विट मैं कंटेनर को हंड्रेड पर सेंटर देता हूं और इसी के साथ मैं क्या करूंगा लिखूंगा बॉर्डर टू पिक्सेल सॉलिड ब्लैक ठीक है बैकग्राउंड भी मैंने यहाँ पर कुछ नहीं किया अपने आइटम्स के साथ तो जो चीज में सारे आइटम में करना चाहता हूं वह आइटम क्लास में डाल दूंगा मैं आइटम क्लास में क्या कर दो सबसे पहले तो बैकग्राउंड कलर उसका रेड नहीं आर टोमेटो कर देते हैं टोमेटो क्या ग्लास इग्ल्ड आइटम ऐसा क्यों वह जासे गुड़ों में टोमेटो कलर क्यों नहीं आया क्या आ गया देखा गया ठीक है तो मैंने सेव नहीं किया तो इसलिए नहीं आया था एनिवेज चलो ठीक है अब यहां पर मैं क्या करूंगा बॉर्डर भी डाल देता हूं यहां पर टू पिक्सल सॉलिड रेड मार्जिन डाल देते हैं 10 पिक्सल की और पैड़ भी डाल देते हैं 3 पिक्सल की सबको अभी करेंगे अभी तो यह एक इन लाइन नहीं ब्लॉक एलिमेंट है तो इसलिए पूरी पूरी बेट ले लेकिन इन डबों को अभी हम ठीक है ठीक करेंगे तो अभी तक हमने सिर्फ इतना किया उनके साथ सारे आइटेंस के साथ हमने यह किया इनको एक तो पैरिंग वगैरह दे दी काम करता हूं मैं आप पर ग्रीन कलर दे देता हूं इसमें बॉर्डर में ताकि अलग से दिखे मेरा इच्छी तो देख रहा है ठीक है और इतना काफी है अभी मैंने यहां पर 123456 डिम बना लिए जो कि एक कंटेनर अंदर है जो कि बाई डिफॉर्ट ब्लॉक एलिमेंट से है अब मुझे फ्लैक्स बॉक्स पताने के लिए क्या करना पड़ेगा मुझे अपने कंटेनर की डिस्प्ले को फ्लैक्स करना पड़ेगा और जैसे मैं यह करूंगा यह देखो यह ऑटोमेटिकली एक लाइन में आ गए यानी कि मैंने इनकी डिस्प्ले को विद भी डिफाइन कर देता हूं क्योंकि अब इट मेक सेंस कि मैं इसकी विट को डिफाइन करूं मालों मैं इसकी है और हाइट तो मैंने इसको अलडी दे रखी थी तो इसने क्या किया पूरी की पूरी हाइट जो है लीली पेरेंट की ठीक है तो अगर मैं इसको हाइट भी दे दो आइटम को तो 200 बाइट 200 के डबा गया और यह मेरा पेरेंट कंटेनर है हैं तो मैंने अभी किया क्या है मैं अगर इस पर राइट क्लिक करके इंस्पेक्ट करूं और इसकी डिस्प्ले देखो कंटेनर की है तो यह देखो डिस्प्लेस कि मैंने कर दिया फ्लैक्स यानि कि मैंने इसको एक फ्लैक्स बॉक्स बना दिया है जो कि अगर नहीं होता तो यह एलिमेंट्स कुछ इस तरह से नीचे को गिरते लेकिन मैंने इसको एक लैक्स बॉक्स टाइम कर दिया इसका मतलब यह है कि अब मेरा जो कंटेनर है वह क्या बन चुका है मेरा कंटेनर बन चुका है तो मैंने इनके पेरेंट को बना दिया फ्लेक्स इसका मतलब ऑटोमेटिकली यह सारे बन गया फ्लेक्स आइटम्स और यह बन गया फ्लेक्स कंटेनर बहुत ही बढ़िया ठीक है अब देखो यहां पर मैं आप लोगों को फ्लेक्स प्रॉपर्टीज के लिए बताऊंगा प्रॉपर्टीज फॉर फ्लेक्स कंटेनर ठीक है तो जो कंटेनर के लिए प्रॉपर्टीज इनकी बात करेंगे एक कंटेनर में ऐड करूंगा कुछ प्रॉपर्टीज होती है जो कि मैं आइटम में ऐड करूंगा अभी मैं कंटेनर की प्रॉपर्टीज तो आपको ठीक है मैं आप लिख देता हूं इनिशलाइज थी कंटेनर एज़ फ्लैक्स बॉक्स यानि कि जैसे आप यह करोगे तो आपको फ्लैक्स बॉक्स बन जाएगा अब flex container की properties क्या हैं? तब से पहले तो flex direction, अगर मैं flex direction row कर दू, तो आप लोग कहो कि हरी भाई ये क्या मज़ाग है, क्योंकि कुछ हुआ ही नहीं, और ऐसा इसलिए है कि flex direction by default row होती है, लेकिन अगर मैं इसको column कर दू, तो आप लोग देखो यहाँ पर क्या होगा, flex direction column करने से तो अगर मैं आपको flex direction row reverse कर दूँ तो ये row में उल्टे आ जाएगे items और इदर आ जाएगे देखो इस side सारे के सारे straight गिरा दी जाएगे इसका मतलब ये हुआ कि आपका जो flex box है वो यहाँ से fill होना start होगा reverse से fill होना start होगा तो यहाँ से fill होना start होगा या नहीं कि reverse से fill होना start होगा flex box ठीक है जो flex container है चलो बढ़िया, अब एक चीज आओर बता देता हूँ आप लोगों को फिर से, कि मैंने यहाँ पर flex direction जब row लिखा था, तो इसकी flex direction रो थी, लेकिन जो चीज बात में लिखी जाती है, वो उपर वाले को overwrite कर देती है, तो यहाँ पर जब आया, तो यह flex direction column हो गई, इसलिए मै अब मैं वापस से row reverse को column reverse कर दूँगा, और column reverse समझी गए होगे आप लोग, नीचे से fill होना start होगा, और उल्टे उसमें fill होना start होगा, ठीक है, तो यह हो गए आपका column reverse, so I hope कि flex traction property आप लोगों को समझ में आ गई होगी, ठीक है, तो flex traction को वापस से row कर देता हूँ उनको comment out करके, और क्योंकि row by default होती है तो मुझे वो भी लिखने की जरूरत नहीं है, ठीक है, यह काम करता हूँ, उसको रहने देता हूँ ताकि आप लोगों को पता चले कि by default मैं आपको लिख देता हूँ, ए डिफॉल्ट इस रोप्स मैंने गलत जगह लिख दिया मुझे लिखना चाहिए था डिफॉल्ट वैल्यू इस रोग दिए तो ऐसे करके कमेंट करके इसको ऊपर मूव करेंगे सेव करेंगे ठीक है यहां पर एक स्पेस दे देंगे ठीक है बढ़िया डिफॉल्ट वैल्यू ऑफ फ्लैक्स रेक्शन इस रोग है तो यह हो गई हमारी फ्लैक्स डिटेक्शन ठीक है फ्लैक्स डिटेक्शन में कोई प्रॉब्लम भी आप लोगों नहीं होगी अब यहां पर देखना क्या होगा अगर मैं आप राइट क्लिक करके इंस्पेक्ट करो यहां पर क्लिक करो है वह क्या है बिल्कुल सही गेस कि आपने उसका नाम है फ्लैक्स राप बाय डिफॉल्ड है नो रैप लेकिन मैं अब यहां पर रैप कर दूंगा तो जैसे मैं इसको रैप किया तो देखो क्या होगा जैसे मैं इसको छोटा करूंगा यह राप होगे अगले है उस इसको नीचे कर देता है तो यह देखो बहुत ही बढ़िया तरीके से राप हो रहा है अब यह राप बिल्कुल इस डिरेक्शन में हो रहा है देखो यहां वान टू थ्री फॉर पाइट सिक्स अब देखना अगर मैं आप फ्लैक्स डिरेक्शन को लिख दूं राप रिवर है और सेव करूं इसको तो यह देखो क्या हो गया उल्टे उसमें राप हो यानि कि अगर यह फुल स्क्रीन में आ रहा है तब तो यह ऐसे रह जाएगा ठीक है और नीचे आ जाएगा और जैसे ही मैं इसको बंद करूंगा तो यह राप रिवर्स पर स्टार्ट हो दे और 56 कुछ इस तरह से आने लगेगा तो आपकी आप लोगों को राप और राप रिवर्स समझ में आ गया होगा बाय-डिफॉल्ट है नो राप अब यह पर देखो कंटेनर से बाहर निकलना है तो उस प्रॉब्लम को भी आपको सॉल्व करना पड़ेगा आप लोगों तो कि जो हाइड है वह मैंने हार्ड कोड कर रखी है इसलिए प्रॉब्लम हो रही है मडिवेस को प्रॉब्लम नहीं है ठीक है हम लोग जो है इस तरह से बाकी जो में सीजेस प्रॉपर्टी सीखिए उससे इसको फिक्स कर सकते हैं बट अगें इस तरह से अगर आपको उल्टा राप करना है तो आप ऐसा कर सकते हैं पर बाइट फॉल्ड जो राप से काम हो जाता है कि किसी ने अगर टैबलेट में देखिए आप चाहेंगे ऐसी दिखें कंप्यूटर में ऐसी दिखे तो वह चीज आप कर सकते हो ठीक है सो आई होगी आप लोगों को यह फ्लैक्स राप प्रॉपर्टी भी समझ में आ गई होगी चलो बढ़िया अब यहां पर एक एक शॉट कि दो प्रॉब्लमीट में लगता है तो फ्लैक्स डिरेक्शन इट फ्लैक्स डाप तो फ्लैक्स डिरेक्शन में डाल देता हूं मानो मैंने डाल दिया और रो डिवर्स और उसके बाद राप डाल दूंगा और अगर मैं यह करूंगा मैं आप यह कर देता हूं राप को अगर मैं यह करूंगा तो यह दोनों प्रॉब्लम एक साथ सेट कर सकता है निकिन डाइरेक्शन और फ्लो चॉटी खुलकर आया है इस पेसीफाइस हाउ फ्लैक्स बॉक्स आइटम्स आर प्लेस टिन दिफ्ट एक्स बॉक्स तो यह पहले फ्लैक्स रेक्शन लिख दो उसके बाद फ्लैक्स रैप लिख दो तो यह दोनों चीजों की वैल्यू लिख दो एक ही लाइन में और अपनी जगह चारों दिशाओं में रिपिक्स लिखेगी ठीक है तो देखते हैं कैसा दिख रहा है देखो यहां पर मैंने क्या किया सबसे पहले तो मैं रोडीवर्स किया था और उसके बाद राप किया था अगर मैं यह हटा दूं भी यहां से तो क्या होगा तो यह देखो बिल्कुल नॉर्मल हो जाएगा पेज ठीक है तो यह भी क्लियर हो गया आप लोगों कोई जो फ्लैक्स रैप फ्लैक्स फ्लॉव वाला शॉर्ट एंड था वह अब यहां पर बात करते हैं जस्टिफाई कंटेंट एक बहुत ही इंपोर्टेंट ऑपिक अ अगर मैं आप जस्टिफाई कंटेंट सेंटर कर दूं तो यह एक ऐसी प्रॉब्लम को सॉल्व करेगा जो कि हम बहुत सारे लोग जो है फेस करते हैं कि सेंटर नहीं हो रही है चीजें सेंटर नहीं हो यह तो यह को सेंटर हो गई चीजें अगर मैं इसको इंटर इंस्पेक्ट करके ऐसे करूं तब देखो इस सेंटर में ही रहेंगी सेंटर में ही रहेंगी देखो यह हमने चीजों को सेंटरी सेंटरली अलाइन कर लिया ठीक है तो अगर आप लोगों को चीजों को सेंटर लिया लाइन करना है तो आप इस किसी और वैल्यू जस्टिफाई कंटेंट की अगर मैं तो यह देखो क्या होगा स्पेस बिट्वीन का मतलब है हर डब्बे के बीच में किनी दो डब्बों के बीच में बराबर स्पेस रख दो और कॉर्नर से स्पेस नहीं करो सिर्फ दो डब्बों के बीच में स्पेस कर दो बराबर बराबर तो यह देखो बराबर बराबर स्पेस और आप लोग यह क्या है space evenly, मैं बताता हूँ क्या है, space evenly में यह होता है कि यह जो spaces हैं सारी, including starting and end, वो सब बराबर होनी चाहिए, ठीक है, I hope कि आपको समझ में आ गया होगा, और इसके बाद होता है space around, इस पेस अराउंड में क्या होता है कि किसी भी एक डब्बे के दोनों दिशाओं में बराबर स्पेस कर दो उससे क्या होगा यहां पर तो इतनी स्पेस हैगी यहां पर एक तो इस डब्बे के लिए आ जाएगी स्पेस और इस डब्बे के लिए आ जाएगी अगर आप यहां समझ में नहीं आता तो आप यह डब्बे ड्रॉक करो और हर डब्बे को एक तरह से कुछ ऐसा समझ लो मार्जिन यहां में भी आ जाएगी इधर और इधर तो यह जगह बड़ी हो गई क्योंकि इसमें यह स्पेस भी है अ है और इस दब्बे की यह स्पेस भी है तो हर दब्बे को लेफ्ट और राइट में अपनी-अपनी स्पेस मिलेगी ठीक है और वह सारी स्पेस बराबर होंगी जितनी भी उपलब्ध स्पेस है उसके हिसाब से इसलिए कि दो डब्बों के बीच में ज्यादा सब्सक्राइब और पूर्ण में स्पेस कम बचेगी ठीक है तो यह होता है हमारा क्या स्पेस अराउंड स्पेस इन लिए क्या था अगर कंफ्यूस हो रहे हैं आप फिर से तो डिफरेंस देखो स्पेसी में यह जगह यह जगह बराबरती है अजय को है लेकिन हमारा यह जो स्पेस बिट्वीन था उसमें क्या था स्पेस बिट्वीन में सिर्फ डबों के बीच में पैसी शुरू और आखिर में स्पेस नहीं थी लेकिन अगर बात करें स्पेस राउन की तो उसमें क्या था कि किन ही भी किसी भी डब्बे लेकिन लेफ्ट और राइट में बराबर स्पेस आ जाएंगी जिसका मतलब है कि अगर यहां पर कोई दो डब्बे है और बीच में गैप है तो एक तो इसका गैप आएगा और इसका गैप आएगा उसली गैप बड़ा हो जाएगा कंपेर्ट उस गैप के ठीक है तो यह रहे हैं बट स्टार्ट और एंड का गैप है वह क्या है छोटे-छोटे है ठीक है तो आप इसको करके देखें आई हॉप कि आपको समझ में आएगा वीडियो को पीछा करके सुन लेना फिर से अगर आप लोगों नहीं सुनी मेरी बात क्या नहीं कहा बड़ा हॉप कि आप लोगों समझ में आ गया होगा इसके बाद अलाइन आइटेम्स प्रॉपर्टी और यह साइड प्रॉब्लम टेट पॉइंट टीविट अगर वह लाइन आइटेम्स को सेंटर कर दो तो यह देखो यह फर्टी कली सेंटर हो जाएगी बहुत बड़ा चैलेंज जो कि लोगों में होता है अ लोग वर्टिकली सेंटर करने के लिए मरते हैं और यहाँ पर हमने फ्री में वर्टिकली सेंटर कर लिया वाबाबा तो इस तरह से आप लोग वर्टिकली सेंटर कर सकते हो चीजों को एक बहुत ही अच्छे एग्जांपल वर्टिकली सेंटर करने का चीजों को तो आपको सम� पर आ जाएगा उसी के साथ साथ में यह सारे हटा देता हूं जो जस्टिफाई किया कंटेंट में है तक यह मारा जो फ्लैक्स बॉक्स हो नॉर्मल पोजीशन में आ जाए तो फ्लैक्स टार्ट फ्लैक्स एंड और उसे के साथ साथ हमने सेंटर देखा एक और वैली होती है कि स्ट्रेच है और इसको सेव करूं अगर तो यहां पर क्या होगा अभी तो बता नहीं इसको राप भी करना पड़ेगा मुझे, मैं इसको राप करता हूँ सबसे पहले, तो मैं राप को टॉगल करता हूँ, अब देखो, अब यहाँ पर क्या होगा, कि मैं इसको इस तरह से छोटा कर रहा हूँ, मैं इसकी विड्ध भी कम करता हूँ भी, तो मुझे यहाँ पर पड़ेगा आइटम की विद्ध को मैं एकदम सॉरी हाइट को कम कर देता हूं अगर मैं इसकी हाइट को कम करूं तो यह देखो मैंने आपके क्या किया था अभी मैंने आपको स्ट्रेच किया था स्ट्रेच में क्या होगा कि यह इस तरह से स्ट्रेच हो गया देखो देखो इस तरह से स्ट्रेच हो अगर मैं इसको और छोटा करूं कुछ इस तरह से यह देखो यह स्ट्रैच हो गया यानी कि इसने क्या किया इवनली स्पेस बना ली अपने सारे अपने यहां पर 12345 यह जो गैप्स है 12345 इन पांचों गैप्स में तो वर्टिकली जो इवनली स्पेस बनाइए किसकी वजह से वह बनाई है हमारे स्ट्रेच की वजह से स्वाइड ऑफ कि अलाइन आइटम प्रॉपर्टी आप लोगों को समझ में आ गई होगी तो अब यहां पर मैं करूंगा क्या कि जल्दी से आप लोगों के लिए नोट पर आ देता हूं नोट का क्या मतलब है नोट का मतलब है इसको नोट के तौर पर बना देता हूं तो इस लिखा गया है वह इनिशालाइज करने के लिए लिखा गया कंटेनर को उसके बाद फ्लैक्स प्रॉपर्टीज मैंने यहां पर इस तरह से लिख देता हूं डिफॉल्ट वाल्यू और फ्लैक्स रेक्शन इस रो और यहां से स्पेस खत्म कर देता हूं और उसके बाद डिफॉल्ट वाल्यू जो इसकी है वो क्या है नो रैप है यहां पर डिफॉल् नहीं हो रहा ठीक है तो यहां पर इसलिए डिफॉल्ड वाल्यू नो रहता है अब यहां पर यह सारी प्रॉपर्टीज फ्लैक्स राप की फ्लैक्स फ्लो के बारे में हमने बात करी थी और जस्टिफाई कंटेंट की बात करी थी तो यहां पर जस्टिफाई कंटेंट कि हमने बात की थी तो काम करता है इसको यहां से अनकमेंट करके एक ही करके अमेंट कर देता हूं तब यह बेकर कि इनको वापस से अनकमेंट करके देख लो तो फ्लैक्स फ्लो क्या है शॉट है डेड एक किस के लिए डिरेक्शन और राप के दिस इस शॉट है और डिरेक्शन शुरू एंड फ्लैक्स फ्लैक्स राप ठीक है तो यहां पर अ कुछ इस तरह से लिख रहा हूँ तो मैं basically कर कर रहा हूँ कि आप लोगों के लिए notes तैयार कर रहा हूँ एक तरह से ताकि आप लोग बाद में देखें तो आपको पदद चल जाता है ये एक shorthand है फिर justify content will justify the content in horizontal direction ठीक है और उसी के साथ साथ ये जो align items है ये vertical direction में same काम करेग है तो मैं यहां पर लिख देता हूं कि यह वर्टिकल डिरेक्शन में ए शिव काम करें ठीक है तो यह हमारी सीएसस कम नोट सफल एक्स बॉक्स के यह सारी प्रॉपर्टी से कंटेनर की अभी आप आइटम की कोई प्रॉपर्टी नहीं देगी और यहां पर इन सारी प्रॉपर्टीस को एक करें कमेंट भी कर देता हूं कि आप लोग जो है बिल्कुल भी कंफ्यूज ना ठीक है तो यह राप्ट हमारा इसको नो राप्ट कर देता हूं सारी डिफॉल्ट वाल्यू कर देता हूं अ कि यह काम करता हूं इसको इस तरह से कमेंट कर देता हूं और इसको भी कमेंट कर देता हूं इस तरह से और डिस्प्लेड फ्लैक्स तो रखना ही पड़ेगा ठीक है तो मैंने फ्लैक्स बॉक्स अपना इनिशियलाइज किया है वह फ्लेक्स आइटम की प्रॉपर्टी तो यह थी फ्लेक्स कंटेनर की प्रॉपर्टी तो फ्लेक्स प्रॉपर्टी फॉर फ्लेक्स कंटेनर और अब हम देखेंगे फ्लेक्स प्रॉपर्टी फॉर फॉर फ्लेक्स आइटम ठीक है तो यहां पर मैं क्या करूंगा एक काम करता हू ए शेयर करूंगा आईटम वन में मैंने आप लिख दिया फ्लैक्स प्रोडीज फॉर फ्लैक्स आईटम ठीक है और यहां पर सबसे पहले मैं ऑर्डर की बात करना चाहूंगा अगर मैं ऑर्डर को अ टू कर दूँ यापर, अपने item 1 के लिए, तो यापर देखो क्या होगा, मैंने क्या किया, order को 2 कर दिया item 1 के लिए, इसका मतलब क्या हुआ, इसका मतलब यह हुआ कि मैंने उसको maximum कर दिया, यानि कि जो मेरा first वाला box है, वो सबसे अंत में चला जाएगा, लेकिन अगर मैंने फॉर्टी ठीक है तो क्या होगा यह अब अंत में जाएगा यह अंत में वह जाएगा जिसका ऑडर बड़ा होगा साइड होगी आपको समझ में आ गया होगा कि यह ऑडर से क्या होता है तो आप ऑडर चेंज कर सकते हो जिसको भी आप पहले या पर रखना चाहते हो उ आप खिलवार कर सकते हैं जो बड़े ऑर्डर से वह बाद में दिखा जाएंगे और जो आपके छोटे ऑर्डर से वह यहां पर स्टार्टिंग में दिखा जाएंगे तो आइटम्स जो होते हैं बाई डिफॉल्ट जो उनका ऑर्डर है उसमें लेकर किया जाते चेंज करें तो आप लोग वहां पर ऑर्डर प्रॉपर्टी को यूज कर सकते हैं तो मैं आप लिख देता हूं हाई अड्राइट लेटर इट अ शोज अप इन थी कंटेनर ठीक है तो आप लोगों यहां पर पता चल गई कि अगर आप ऑडर बड़ा होगा तो बाद में दिखाए जाएगा ठीक है आई हॉप कि आप लोगों समझ में आ गया होगा अब यहां पर देखते हैं दूसरी प्रॉपर्ट वह फ्लेक्स ग्रो और यह फ्लेक्स ग्रो क्या है अगर मालों में फ्लेक्स को को आप तीक हो तो यहां पर क्या होगा कि यह मैं आपको दिखाता हूं मैंने आइटम वन के लिए फ्लेक्स को थ्री कर दिया मैं पर इसके ऑर्डर को तो वापस से normal कर दिया मैंने, मैंने order 2 किया हुआ था, इसलिए वो बाद में दिख रहा था, अब यहाँ पर देखो, क्या होगा, यह जो मेरा flex box है, मैं अगर इसको वापस, मैं इसको छोटा कर दूँ अगर, तो यह तो first, second, third मेरे ऐसे ही आ रहे हैं, लेकिन अगर मैं इसको बढ़ा दूँ, तो क्या होगा, कि जैसे ऐसे मेरा box बढ़ता जाएगा, जो मेरा first वाला box है, वो क्या करेगा, वो 3 का proportion ले लेगा, यानि कि वो अब जादा space लेगा, कि कंपेर्ट टू second and third box, क्योंकि उसमें क्या है, flex group property, तो इसका मतलब यह होगा, कि अगर, अगर आप लोगों ने फ्लैक्स क्रो प्रॉपर्टी दे दी किसी भी बॉक्स को तो वह ज्यादा फूर्थी के साथ आपको बढ़ता हुआ दिखाई देगा जैसे कि आप यहां पर देख सकते हैं अगर मैं यहां पर फ्लैक्स क्रो को टू गर्ज आइटम वन के लिए और फ्लैक्स क्रो को गर दूं ती आइटम नंबर है तो आप लोग यहां पर देखो जिसमें मैंने ज्यादा नंबर दिया है वह ज्यादा बड़ा आप लोगों को यहां पर दिखाई देखा जब आपके फ्लैक्स कंटेनर को बड़े होने का मौका मिलेगा तो यहां पर मुझे मौका मिल रहा है बड़ा इसमें नेगेटिव नंबर्स होते हैं इन वाले तो यह बात याद रखना नेगेटिव नंबर्स में गलती से भी आप मत देना लेकिन नेगेटिव नंबर्स हम ना देने के बजार फ्लैक्स श्रिंक यूज कर सकते हैं जो फ्लैक्स श्रिंक होता है वह काम करता है तो यह बस यह वह श्रिंक के टाइम पर काम आता है अगर मैंने फ्लैक्स श्रिंक को थ्री कर दिया मान लो यहां पर क्योंकि इसमें मैंने थ्री दे रखा है फ्लैक्स चिंक अगर मैं आप फ्लैक्स श्रिंक दे दूं तो मैंने आइटम वन में फ्लैक्स चिंक को कम रखा है तो क्योंकि मैं आइटम वन में फ्लैक्स चिंक को कम रखा है इसलिए श्रिंख जो है मुझे तो जो फ्लेक्स ट्रिंक है वह एक नंबर है उसको आप दे देंगे जिसमें सबसे ज्यादा देंगे वह आपको सबसे ज्यादा श्रिंक होता हुआ मिलेगा और उसी के साथ आपका जो फ्लेक्स क्रो है जिसमें आप ज्यादा वैल्यू देंगे वह आपको लागो करें इस कानून को लागो करें सिर्फ एक आइटम के लिए ठीक है तो यह था हमारा फ्लैक्स ट्रिंक अब यहां पर अगर आप डिफॉल्ट साइज चेंज करना चाहते हैं किसी भी फ्लैक्स आइटम का तो आप यूज कर सकते हैं फ्लैक्स बेसिस का जैसे है और यहां पर देखो विड्ड दोस्तों मैंने दे रखी है मान लो मैं आइटम टू की जो विड्ड है उसको देना चाहता हूं मान लो 320 देना चाहता हूं ठीक है तो यहां पर मैं इसके साइज को कंट्रोल कर सकता हूं फ्लैक्स कि आप लैक्स प्लेक्स पेसेस हाइट है नहीं मैं आप लोगों को बताता हूं मैं आपको लिख देता हूं वेन फ्लैक्स डिरेक्शन इस सेट टू रो ठीक है तो गया होगा फ्लैक्स बेसिस विल कंट्रोल विट ठीक है वरना क्या होगा वरना एक मिनट में आपको कंट्रोल डी करता हूं वेन फ्लैक्स डिरेक्शन आप इस सेट टू कॉलम यह आइट को कंट्रोल करेगा ठीक है तो यह डिफरेंस है बस यह बात आप लोगों याद रखना है फ्लैंस बेसेस 320 क्या करेगा इसको यहां पर इसकी विड को चेंज कर देगा ठीक है देखो बागी सब में क्या दिया रखी है जाएगा इस लेकिन अगर मैं इसको यहां पर 260 कर दूं तो दूसरा वाला आपको थोड़ा सा बढ़ा हुआ दिखिए क्योंकि अभी इस विराफ लेक्शन किया है मेरा फ्लेंड्स रिप्शन रो है तो क्या बताया रो में क्या कंट्रोल करेगा विड्ड को क्ट्रोल करेगा फ्लेंड्स पेस और अगर मैं फ्लेंड्स रिप्शन को क्या कर दूं कॉलम में करके दिख कि यहां पर करके दिखा देता हूं और यह मैं कंटीनर में सेट करूंगा ठीक है फ्लेक्स टरेक्शन क� और जब मैं यह करूंगा तब देखना इसकी विट नहीं इसकी हाइट चेंज होगी देखो इसकी हाइट चेंज होगी तो आई हॉप कि समझ में आ गया होगा इसको हटा देता हूं कि जो फ्लैक्स बेसिस है वह ना रो है वह सॉरी ना विट तरह हाइट है यह विट होगी जो फ्लैक्स रिएक्शन रो होगी और हाइट होगी जब फ्लैक्स रिएक्शन कॉलम होगी एस सिंपल इस दाट तो यहां पर फ्लैक्स बेसिस से डरना मत यह विट तरह हाइट है बेस्ट ऑन दिस कंडीशन स्टेट आई होप कि क्लियर हो गया होगा तो और यहां पर जो आईटम थीन ऑर्डर और लगा रहा है इसको हटा देता हूं यह कंफीशन्स क्रिएट करें बाद में अब यहां पर हमने देख लिया फ्लैक्स बेसिस हमने फ्लैक्स क्रो और फ्लैक्स श्रिंग देखा अब एक फ्लैक्स चॉट हैंड होता है हमारा यहां पर अगर मैं सिर्फ लैक्स लिखों तो मैं क्या कर सकता हूं मैं सिर्फ लेकर तो तीन चीजें लिख सकता है तो फ्लैक्स क्रो मान लो फ्लैक्स क्रो को मैं टू कर दूं और तीसरा होता है हमारा क्या फ्लैक्स बेसिस मान लो थ्री पॉटी पॉइंट पिक्सल कर दूं तो आइटम थ्री के लिए मैंने item 2 से बड़ा कर दिया, flex basis, तो देखो यहाँ पर, item 3 और बड़ा हो गया, ठीक है, इसको थोड़ा और चोटा कर लेता हूँ, ज़्यादा बड़ा कर दिया मैंने, 300 कर देता हूँ, और 300 भी नहीं यार, 230 कर देता हूँ, कुछ भी कर सकते हो, और, और क्योंकि मैंने इसकी जो flex shrink है, और flex grow है, देखो इसको बड़े होने का मौका मिल रहा है तो यह बढ़ रहा है अकॉर्डिंग लिए श्रिंक होने का मौका हो रहा है तब भी ज्यादा श्रिंक हो रहा है क्योंकि इसकी जो फ्लैक्स चिंक है वह मैंने टू सेट कर रखी है तो होगी फ्लैक्स बॉक्स उससे ज्यादा यूज करने वाले उस प्रॉपर्टी को उसका नाम मैं आप लोगों बताता हूं वह अलाइन सेल्फ अ अगर आपने item 3 को align self center कर दिया, ठीक है, sorry, flex end कर दिया, तो क्या होगा, यह flex के end में चला जाएगा, देखो third box, और अगर आपने इसको flex start कर दिया, है तो यह देखो फ्लेक्स के स्टार्ट में चला जाएगा तो आप इसको फ्लेक्स के स्टार्ट और फ्लेक्स के एंड भेज सकते हैं और आप उसको सेंटर भेज सकते हैं तो जो मैंने आपका सेंटर लिखा था वह भी अगर मैं आपको देख दूं तो यह एकदम सेंटर में आ गया तो प्रॉपर्टीज को सही से लिख देता हूं फ्लेक्स स्टार्ट अ फ्लेक्स एंड और सेंटर ठीक है तो फ्लेक्स स्टार्ट फ्लेक्स एंड और सेंटर में आप लोग अपने जो आइटम्स हैं उनको अनाइन कर सकते हैं सो दिस वॉट फ्लेक्स बॉक्स मैं चाहूंगा कि आप लोग इस प्लेडिस्ट को एक्सेस करें कर लें अभी कि अभी अगर आप लोग नहीं करिए और मैं चाहता हूं कि आप लोग जल्दी से अपने लेट फ्लैक्स बॉक्स की मदद से बनाएंगे यह फ्लैक्स बॉक्स एक ऐसा तरीका है जिसकी मुझे से आप रिस्पॉंसिव लेट बना सकते हैं अच्छी वि� इन लाइन ब्लॉक वह सब चीजें यूज करें दी उससे हमें प्रॉब्लम जेलनी पड़ी थी वह सब प्रॉब्लम सबको नहीं जेलनी पड़ेंगी क्योंकि अब लैक्स्ट बॉक्स हमारे पास है बहुत बड़ा टूल हमारे पास है एकदम हम अपने जो है नहीं जो हम फ्लोट्स यूज करें और परेशान हो डिस्प्ले किसकी ब्लॉक कब होगी कब इन लाइन होगी कब इन लाइन बचाओगी फूट टेंशन जो है आपकी बच जाती है अगर आप लोग इस्तेमाल करते हैं फ्लैक्स बॉक्स अ तो मुझे बताना कि यह वीडियो कैसा लगा उसी के साथ यह प्लेलिस्ट एक्सेस नहीं कर रही है अभी तक आप लोगों ने जरूर कर लेना कि यह बहुत बहुत इंपोर्टेंट है यही वह जगह है जहां पर मैं सारे के सारे आइटम्स डालूंगा और अगर आप लोगों ने अभी तक मच गैस वॉचिंग इस वीडियो एंड आइवेल सी नेक्स्ट टाइम अ प्रेम प्रेम प्रेम प