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