Flexbox जेनरेटर

justify-content आइटम को मुख्य अक्ष (main axis) — यानी जिस दिशा में row या column बहता है — पर बाँटता है, जबकि align-items उन्हें दूसरी अक्ष पर सेट करता है। दिशा row से column करते ही दोनों अक्ष आपस में बदल जाती हैं, तो justify-content ऊपर-नीचे और align-items बाएँ-दाएँ काम करने लगता है।

नंबर से एक आइटम चुनें, फिर तय करें कि खाली जगह भरने के लिए वह कितना grow करे, जगह कम हो तो कितना shrink करे, उसका शुरुआती साइज़ (basis) क्या हो और उसकी अपनी cross-axis अलाइनमेंट क्या हो। order आइटम को HTML बदले बिना स्क्रीन पर आगे या पीछे कर देता है। सिर्फ़ उन्हीं आइटम के लिए CSS में अलग नियम बनता है जिन्हें आपने सच में बदला है।

wrap बंद हो तो सभी आइटम एक ही लाइन में रहते हैं और पतले दब सकते हैं। इसे चालू करें तो जो आइटम नहीं समाते वे अगली लाइन में चले जाते हैं — तभी align-content काम में आता है और सभी लाइनों को एक समूह मानकर उनके बीच जगह बाँटता है। gap बिना margin के आइटम और लाइनों के बीच का अंतर तय करता है।