सीएसएस फ्लेक्सबॉक्स जेनरेटर

एक फ्लेक्सबॉक्स लेआउट में दो अलग-अलग नियम पुस्तिकाएं होती हैं - कंटेनर पर गुण (फ्लेक्स-दिशा, औचित्य-सामग्री, संरेखित-आइटम, फ्लेक्स-रैप, गैप) और प्रत्येक बच्चे पर गुण (फ्लेक्स-ग्रो, फ्लेक्स-श्रिंक, फ्लेक्स-आधार) - और उन्हें मिलाना "मेरी अपेक्षा के अनुरूप यह केंद्रित / बढ़ / रैपिंग क्यों नहीं हो रहा है" बग का सबसे आम स्रोत है। यह जनरेटर दोनों नियम पुस्तिकाओं को एक साथ स्क्रीन पर रखता है: किसी भी कंटेनर नियंत्रण या किसी भी बच्चे के स्वयं के फ़ील्ड को बदलें और तीन क्रमांकित, रंग-कोडित बॉक्स तुरंत अपडेट करें, ताकि कारण और प्रभाव दृश्यमान रहें।

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

प्रीसेट पृष्ठ सीधे उन लेआउट पर पहुंच जाते हैं जिन्हें लोग वास्तव में नाम से खोजते हैं: एक डिव को केंद्र में कैसे रखा जाए (एकल सबसे अधिक पूछा जाने वाला सीएसएस लेआउट प्रश्न, जस्टिफ़ाई-कंटेंट और एलाइन-आइटम दोनों को केंद्र में सेट करके हल किया जाता है), एक लोगो-बाएं लिंक-दाएं नेवबार, फ्लेक्स-ग्रो के माध्यम से समान-चौड़ाई वाले लचीले कॉलम, और इसके करीबी रिश्तेदारों के बीच के स्पेस-अराउंड और स्पेस-समान रूप से तुलना की जाती है।

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