CSS Flexbox जनरेटर

एक flexbox लेआउट की दो अलग-अलग नियम-पुस्तिकाएँ होती हैं — कंटेनर पर गुण (flex-direction, justify-content, align-items, flex-wrap, gap) और हर चाइल्ड पर गुण (flex-grow, flex-shrink, flex-basis) — और इन्हें आपस में मिला देना "यह बीच में क्यों नहीं आ रहा / बढ़ क्यों नहीं रहा / लपेट क्यों नहीं रहा" वाली गड़बड़ियों का सबसे आम स्रोत है। यह जनरेटर दोनों नियम-पुस्तिकाओं को एक साथ स्क्रीन पर रखता है: कोई भी कंटेनर नियंत्रण या किसी चाइल्ड का अपना फ़ील्ड बदलें और तीन नंबर वाले, रंग-कोड वाले बॉक्स तुरंत अपडेट हो जाते हैं, ताकि कारण और प्रभाव दिखता रहे।

कंटेनर वाला पक्ष हर लेआउट अक्ष को कवर करता है: एक दिशा चुनें, तय करें कि चाइल्ड मुख्य अक्ष पर justify-content से कैसे वितरित हों, उन्हें क्रॉस अक्ष पर संरेखित करें, तय करें कि वे नई पंक्तियों में लपेटें या नहीं, और मार्जिन के जुगाड़ की बजाय उनके बीच gap सेट करें। चाइल्ड पक्ष भी उतना ही वास्तविक है: आठ तक बॉक्स जोड़ें, दो तक हटाएँ, और उनमें से किसी को भी उसका अपना flex-grow, flex-shrink और flex-basis दें — जनरेटर तभी प्रति-चाइल्ड CSS नियम छापता है जब इनमें से कम-से-कम एक ब्राउज़र डिफ़ॉल्ट से अलग हो, इसलिए कॉपी किया गया कोड कभी भी उन बक्सों पर flex-grow: 0 जैसी चीज़ें नहीं ठूँसता जिन्हें उसकी ज़रूरत नहीं।

प्रीसेट पेज सीधे उन लेआउट पर पहुँचते हैं जिन्हें लोग नाम से खोजते हैं: एक div को बीच में कैसे लाएँ (CSS लेआउट का सबसे ज़्यादा पूछा जाने वाला सवाल, justify-content और align-items दोनों को center पर सेट करके हल), बाईं ओर लोगो–दाईं ओर लिंक वाला नैवबार, flex-grow के ज़रिए बराबर-चौड़ाई वाले लचीले कॉलम, और इसके करीबी रिश्तेदारों space-around और space-evenly के मुक़ाबले space-between की अगल-बगल तुलना।

इस साइट के हर टूल की तरह, जनरेटर मुफ़्त है और पूरी तरह आपके ब्राउज़र में चलता है: कोई अपलोड नहीं, कोई खाता नहीं, और पेज लोड होने के बाद यह ऑफ़लाइन भी काम करता रहता है।