Flexbox जनरेटर
व्हिज्युअल कंट्रोल्ससह फ्लेक्स कंटेनर आणि त्याचे आयटम्स सेट करा, लेआउट थेट बदलताना पहा आणि एका क्लिकमध्ये CSS कॉपी करा.
तुमचे लेआउट थेट तुमच्या ब्राउझरमध्ये तयार केले जाते. तुम्ही येथे सेट केलेले काहीही BroBroGo वर अपलोड केले जात नाही.
नेहमी विचारले जाणारे प्रश्न
justify-content आणि align-items मध्ये काय फरक आहे?
Justify-content मुख्य अक्षावर (main axis) — म्हणजेच रो (row) किंवा कॉलम (column) ज्या दिशेने वाहतो तिथे — आयटम्समध्ये जागा सोडते, तर align-items त्यांना दुसऱ्या अक्षावर (cross axis) ठेवते. दिशा row वरून column वर बदला आणि दोन अक्ष अदलाबदल करतात, त्यामुळे justify-content वरून खाली आणि align-items डावीकडून उजवीकडे काम करू लागते.
प्रत्येक आयटमचे नियंत्रण कसे काम करते?
कोणताही आयटम त्याच्या क्रमांकाने निवडा, नंतर अतिरिक्त जागा भरण्यासाठी तो किती वाढेल (grow), जागा कमी असताना किती संकुचित होईल (shrink), त्याचा सुरुवातीचा आकार (basis) आणि त्याचे स्वतःचे क्रॉस-अक्ष अलाइनमेंट सेट करा. 'Order' एचटीएमएलला स्पर्श न करता स्क्रीनवर आयटम आधी किंवा नंतर हलवते. तुम्ही प्रत्यक्षात बदललेल्या आयटम्सनाच CSS मध्ये स्वतःचा नियम मिळतो.
wrap आणि align-content कधी महत्त्वाचे ठरतात?
रॅपिंग (wrapping) बंद असताना, प्रत्येक आयटमला एकाच ओळीवर येण्यास भाग पाडले जाते आणि ते अरुंद केले जाऊ शकतात. ते सुरू करा आणि न बसणारे आयटम पुढच्या ओळीवर जातील — अशा वेळी align-content नियंत्रण घेते, आणि ओळींमध्ये गट म्हणून जागा सोडते. 'Gap' मार्जिनशिवाय आयटम्सच्या दरम्यान आणि ओळींच्या दरम्यान जागा सेट करतो.