HN ओपन: CSS Flexbox कठिनाइयाँ दूर करने के लिए Playground

 (yoavsbg.github.io)
2 पॉइंट द्वारा GN⁺ 2025-01-06 | 1 टिप्पणियां | WhatsApp पर शेयर करें

  • विभिन्न flex properties को ट्राई करके layout पर उनके असर को समझने में मदद करने वाला टूल

  • बदलाव को real-time में देख सकते हैं और जेनरेटेड CSS कोड को कॉपी कर सकते हैं

  • flex-direction

    • row: elements को horizontal दिशा में arrange करता है
    • column: elements को vertical दिशा में arrange करता है
    • row-reverse: elements को horizontal दिशा में उल्टे क्रम में arrange करता है
    • column-reverse: elements को vertical दिशा में उल्टे क्रम में arrange करता है

  • justify-content

    • flex-start: elements को शुरुआत वाले बिंदु पर align करता है
    • center: elements को बीच में align करता है
    • flex-end: elements को अंत वाले बिंदु पर align करता है
    • space-between: elements के बीच समान दूरी छोड़ता है
    • space-around: elements के चारों तरफ समान दूरी छोड़ता है

  • align-items

    • stretch: elements को stretch करके align करता है
    • flex-start: elements को शुरुआत वाले बिंदु पर align करता है
    • center: elements को बीच में align करता है
    • flex-end: elements को अंत वाले बिंदु पर align करता है
    • baseline: elements को baseline पर align करता है

  • flex-wrap

    • nowrap: elements को एक लाइन में रखता है
    • wrap: elements को कई लाइन में फैलाता है
    • wrap-reverse: elements को उल्टे क्रम में कई लाइन में रखता है

  • उदाहरण कोड

    • .container { display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; flex-wrap: nowrap; }

  • निर्माता

    • Yoav Sabag द्वारा बनाया गया
    • YouTube और GitHub पर अधिक जानकारी देखी जा सकती है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-01-06
Hacker News टिप्पणी

  • Flexbox सरल और समझने में आसान लग सकता है, लेकिन इसके गुणों और मानों के नाम सहज नहीं हैं

    • justify-content और align-items जैसे नाम भ्रम पैदा करते हैं
    • Flexbox सीखने के लिए कई बार प्रयास करना पड़ता है

  • Flexboxfroggy.com और cssgridgarden.com की सिफारिश की

    • ये साइटें Flexbox और CSS Grid सीखने में मददगार हैं

  • Josh का गाइड सुझाया

    • इसमें Flexbox के उन्नत tips और tricks का विस्तार से वर्णन किया गया है
    • flex-basis, auto margins, min-width जैसी अवधारणाओं पर चर्चा की गई है

  • इसी तरह का एक इंटरैक्टिव गाइड बनाने का अनुभव साझा किया

    • इससे चीज़ें दोबारा याद करने में मदद मिलती है

  • justify-content और align-items की जगह main-axis-arrangement और cross-axis-alignment नाम अधिक सहज समझ में आते हैं, ऐसा कहा

  • Flexbox का सही उपयोग करना कठिन लगता है, ऐसी शिकायत की

    • Flexboxfroggy.com भी मददगार नहीं लगा

  • CSS लेआउट का अभ्यास करने के लिए मज़ेदार चुनौतियों की जरूरत है

    • ChatGPT CSS डिबग करने में मदद करता है, लेकिन CSS की गहरी समझ आवश्यक है

  • Flexbox और Grid की syntax को उन्होंने descriptive यानी वर्णनात्मक माना

    • बॉक्स मॉडल को समझना और Firefox Dev Tools का इस्तेमाल करना मदद करता है
    • Flexboxfroggy और cssgridgarden अभ्यास में उपयोगी हैं
    • CSS-tricks cheat sheet को वे अक्सर संदर्भ के रूप में देखते हैं

  • उन्होंने यह भी उल्लेख किया कि Flexbox के child item properties भी महत्वपूर्ण हैं

    • सिर्फ चार container properties तक सीमित रहना सीमित है

  • Flexbox properties के संदर्भ के लिए मैंने एक cheat sheet बनाई

    • यह दूसरों के लिए भी उपयोगी हो सकती है