Flexbox जनरेटर: व्हिज्युअल लेआउट डिझाइन आणि CSS निर्मिती
CSS Flexbox लेआउट दृष्यदृष्ट्या तयार करण्यासाठी, त्याचे विविध गुणधर्म समजून घेण्यासाठी आणि जलद गतीने CSS कोड मिळवण्यासाठी Flexbox जनरेटर हे एक प्रभावी साधन आहे. हे साधन वापरकर्त्याला थेट ब्राउझरमध्ये फ्लेक्स कंटेनर आणि त्यातील आयटम्सची रचना बदलण्याची, त्याचे थेट परिणाम पाहण्याची आणि तयार झालेला कोड कॉपी करण्याची सुविधा देते.
कंटेनरचे गुणधर्म आणि त्यांचे कार्य
फ्लेक्स कंटेनरच्या पातळीवर लेआउट नियंत्रित करण्यासाठी खालील पर्याय उपलब्ध आहेत:
- दिशा (Direction): याद्वारे मुख्य अक्ष ठरवला जातो. यामध्ये 'ओळ' (Row), 'उलटी ओळ', 'स्तंभ' किंवा 'उलटा स्तंभ' हे पर्याय निवडता येतात. जेव्हा तुम्ही दिशा ओळ वरून स्तंभ वर बदलता, तेव्हा मुख्य अक्ष (main axis) आणि क्रॉस अक्ष (cross axis) यांची अदलाबदल होते, ज्यामुळे
justify-contentआणिalign-itemsच्या कार्यपद्धतीत बदल होतो. - रॅप: यामध्ये 'रॅप करू नका' (No wrap), 'रॅप' (Wrap) आणि 'उलटा रॅप' हे पर्याय मिळतात. रॅपिंग बंद असताना सर्व आयटम्सना एकाच ओळीवर राहण्यास भाग पाडले जाते. रॅपिंग सुरू केल्यास, न बसणारे आयटम पुढच्या ओळीवर जातात.
- सामग्री जस्टिफाय करा: मुख्य अक्षावर आयटम्सची मांडणी कशी करावी हे हे ठरवते. यामध्ये 'सुरुवात', 'शेवट' (End), 'मध्यभागी' (Center), 'मधील जागा', 'भोवती जागा' आणि 'समान जागा' हे पर्याय उपलब्ध आहेत.
- घटक संरेखित करा: क्रॉस अक्षावर आयटम्सची मांडणी नियंत्रित करण्यासाठी 'सुरुवात', 'शेवट' (End), 'मध्यभागी' (Center), 'ताणा' आणि 'आधाररेषा' हे पर्याय वापरता येतात.
- सामग्री संरेखित करा: जेव्हा रॅपिंग सुरू असते आणि आयटम्स अनेक ओळींमध्ये विभागले जातात, तेव्हा या ओळींच्या गटांमधील जागा नियंत्रित करण्यासाठी याचा वापर होतो. यामध्ये 'सुरुवात', 'शेवट' (End), 'मध्यभागी' (Center), 'ताणा', 'मधील जागा', 'भोवती जागा' आणि 'समान जागा' हे पर्याय मिळतात.
- गॅप (Gap): याद्वारे आयटम्सच्या दरम्यान आणि ओळींच्या दरम्यान असणारी जागा एका संख्यात्मक मूल्याद्वारे निश्चित केली जाते.
वैयक्तिक आयटम्सचे नियंत्रण
कंटेनरमधील प्रत्येक आयटमचे वर्तन स्वतंत्रपणे नियंत्रित करण्यासाठी खालील पर्याय दिले आहेत:
- क्रम (Order): एचटीएमएल कोडमध्ये बदल न करता स्क्रीनवर आयटमचा क्रम बदलण्यासाठी संख्यात्मक मूल्य दिले जाते.
- वाढवा (Grow): उपलब्ध अतिरिक्त जागा भरण्यासाठी आयटम किती प्रमाणात वाढावा हे ठरवणारे संख्यात्मक मूल्य.
- आकुंचन: जागा कमी पडत असल्यास आयटम किती प्रमाणात संकुचित व्हावा हे ठरवणारे संख्यात्मक मूल्य.
- आधार: आयटमचा सुरुवातीचा आकार ठरवण्यासाठी संख्यात्मक मूल्य किंवा 'स्वयंचलित' (Auto) हा पर्याय निवडता येतो.
- स्वतःला संरेखित करा: विशिष्ट आयटमसाठी क्रॉस अक्षावरील संरेखन बदलण्यासाठी 'स्वयंचलित' (Auto), 'सुरुवात', 'शेवट' (End), 'मध्यभागी' (Center), 'ताणा' किंवा 'आधाररेषा' हे पर्याय वापरता येतात.
थेट परिणाम आणि आउटपुट
या साधनामध्ये वापरकर्त्याने केलेले बदल त्वरित दृश्यमान होतात:
- थेट व्हिज्युअल प्रिव्ह्यू: तुम्ही कंटेनर किंवा आयटमचे गुणधर्म बदलताच, लेआउटमध्ये होणारे बदल थेट स्क्रीनवर दिसतात.
- CSS कोड निर्मिती: तुम्ही केलेल्या रचनेनुसार कंटेनर आणि आयटम्सचा अचूक CSS कोड तयार होतो. केवळ ज्या आयटम्सच्या गुणधर्मांमध्ये बदल केले आहेत, त्यांच्यासाठीच स्वतंत्र CSS नियम (rules) तयार केले जातात.
- आयटम जोडणे: जेव्हा तुम्ही 'आयटम जोडा' वर क्लिक करता, तेव्हा लेआउटमध्ये एक नवीन आयटम (उदा. "Item 5") समाविष्ट होतो.
- कोड कॉपी करणे: 'CSS कॉपी करा' या बटणावर क्लिक केल्यास तो कोड क्लिपबोर्डवर कॉपी होतो आणि बटणाचा स्टेट बदलून 'Copied' असा होतो.
गोपनीयता आणि डेटा प्रक्रिया
या साधनामध्ये वापरकर्त्याच्या गोपनीयतेची पूर्ण काळजी घेतली जाते. तुमचे लेआउट थेट तुमच्या ब्राउझरमध्ये तयार केले जाते. तुम्ही या साधनामध्ये सेट केलेली कोणतीही माहिती किंवा डेटा BroBroGo वर अपलोड केला जात नाही.
वारंवार विचारले जाणारे प्रश्न (FAQ)
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' मार्जिनशिवाय आयटम्सच्या दरम्यान आणि ओळींच्या दरम्यान जागा सेट करतो.