justify-content को space-between और align-items को center रखें। CSS में display: flex;, justify-content: space-between; और align-items: center; होते हैं: पहला और आख़िरी आइटम किनारों से लगते हैं और सभी आइटम पंक्ति में लंबवत बीच में रहते हैं।
ध्यान रखें
justify-content मुख्य अक्ष पर और align-items उसके आर-पार काम करता है, इसलिए flex-direction: column में दोनों अदल-बदल जाते हैं और justify-content लंबवत हो जाता है। जब आइटम को पंक्तियों और कॉलम दोनों में संरेखित करना हो तो grid इस्तेमाल करें।
इस टूल के बारे में
CSS Flexbox Playground एक flex container के मुख्य layout properties के लिए एक इंटरैक्टिव editor है। चार dropdowns से flex-direction, justify-content, align-items और flex-wrap के मान चुनें, और पाँच नंबरदार boxes का एक preview तुरंत फिर से व्यवस्थित हो जाता है, ताकि आप कोई भी code लिखने से पहले देख सकें कि हर property layout को कैसे आकार देती है।
preview के नीचे आपके काम करते ही मिलती-जुलती .container rule उत्पन्न होती है: display: flex के बाद आपके चुने हुए चार declarations। एक बटन पूरे block को आपके clipboard पर कॉपी कर देता है, किसी stylesheet में पेस्ट करने के लिए तैयार। केवल ये container-स्तरीय properties उजागर की जाती हैं; per-item सेटिंग्स जैसे flex-grow, order या align-self शामिल नहीं हैं।
सब कुछ आपके ब्राउज़र में चलता है। कुछ भी अपलोड नहीं होता, कोई अकाउंट या ट्रैकिंग नहीं, और यह ऑफ़लाइन काम करता है। यह flexbox की समझ बनाने या एक शुरुआती rule तैयार करने का एक तेज़ तरीका है जिसे आप बाद में हाथ से परिष्कृत करते हैं।
अक्सर पूछे जाने वाले प्रश्न
preview क्या दिखाता है?
एक flex container जिसमें पाँच नंबरदार boxes होते हैं जो आपके flex-direction, justify-content, align-items या flex-wrap बदलते ही लाइव फिर से व्यवस्थित होते हैं।
क्या उत्पन्न CSS उपयोग के लिए तैयार है?
हाँ। उत्पन्न .container rule को सीधे अपनी stylesheet में कॉपी करें; इसमें display: flex के साथ-साथ आपके चुने हुए चार properties होते हैं।
मैं कौन-सी flexbox properties समायोजित कर सकता हूँ?
चार dropdowns flex-direction (row, row-reverse, column, column-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline) और flex-wrap (nowrap, wrap, wrap-reverse) को नियंत्रित करते हैं।
क्या output में gap या per-item flex सेटिंग्स शामिल होती हैं?
नहीं। कॉपी की गई rule में केवल display: flex और चार container properties होती हैं। preview में 8px gap केवल spacing के लिए है, और item-स्तरीय properties जैसे flex-grow, order या align-self शामिल नहीं हैं।