Flexbox बिल्डर
दिशा, wrap, alignment और gap तय करें, फिर हर item का flex sizing और order बदलें। Row, centered, wrapping-card या vertical-stack preset से शुरू करें।
Main axis के लिए justify-content और cross axis के लिए align-items है। align-content कई wrapped lines पर लागू है। Fixed height में stretch आकार नहीं बदल सकता।
Items
लाइव पूर्वावलोकन
Fixed container स्क्रीन से चौड़ा हो तो preview स्क्रॉल करें। Background, border और labels सजावट हैं; केवल layout CSS export होता है।
उपयोग कैसे करें
उपयोग कैसे करें
- Preset चुनें और container गुण व pixel आकार तय करें।
- 12 तक items जोड़कर grow, shrink, basis, order, align-self, चौड़ाई और ऊँचाई बदलें।
- Live preview देखें, CSS कॉपी या डाउनलोड करें और संबंधित parent व child classes लगाएँ।
Container और item गुण
चार दिशाएँ, तीन wrap modes, main-axis distribution, align-items, align-content और gap हैं। Grow/shrink 0–20, basis auto या px/%, order −100–100 पूर्णांक, align-self, चौड़ाई 0–600px और ऊँचाई 0–400px हैं। Container चौड़ाई 100–1200px, ऊँचाई 80–600px, gap 0–100px है।
Axes समझें
justify-content main axis और align-items cross axis पर है। align-content कई lines पर लागू है। Fixed width/height stretch को रोक सकता है। Grow/shrink/basis से actual main-axis आकार अलग हो सकता है। Order केवल दृश्य स्थान बदलता है, DOM या पढ़ने का क्रम नहीं।
स्थानीय CSS output
Preview में export के layout मान, zero minimum size और border-box हैं। रंग, border और labels सजावट हैं। केवल container/item CSS है, HTML, SCSS, Tailwind या media queries नहीं। Upload या storage नहीं। Actual content और आसपास की styles layout बदल सकती हैं।
अक्सर पूछे जाने वाले सवाल
आप यह भी जानना चाहेंगे
align-content क्यों नहीं बदलता?
यह कई flex lines पर लागू है। Wrap चालू करके पर्याप्त items से कई lines बनाएँ।
क्या order पढ़ने का क्रम बदलता है?
नहीं। केवल दृश्य layout बदलता है। HTML स्रोत क्रम अर्थपूर्ण रखें।