इसका इस्तेमाल कैसे करें
- कंटेनर के लिए क्लास का नाम लिखें, जैसे toolbar। CSS इसे क्लास सेलेक्टर के रूप में इस्तेमाल करता है।
- flex-direction, flex-wrap और संरेखण के मान चुनें। हर एक पहले अपना शुरुआती मान दिखाता है।
- आइटमों की संख्या (1 से 12) सेट करें, फिर हर आइटम का flex-grow, flex-shrink और flex-basis सेट करें।
- पूर्वावलोकन जाँचें, फिर CSS अपनी स्टाइल शीट में कॉपी करें और क्लास कंटेनर पर लगाएँ।
कंटेनर के गुण
CSS Flexible Box Layout Module फ्लेक्स कंटेनर के बच्चों को एक मुख्य अक्ष (main axis) पर लगाता है। flex-direction अक्ष चुनता है, और flex-wrap यह कि बच्चे नई लाइन पर जा सकते हैं या नहीं। justify-content बच्चों को मुख्य अक्ष पर फैलाता है, और align-items तथा align-content उन्हें उसके आर-पार रखते हैं।
- flex-direction का शुरुआती मान row है, और वह row, row-reverse, column या column-reverse लेता है।
- flex-wrap का शुरुआती मान nowrap है, और वह wrap या wrap-reverse भी लेता है।
- justify-content का शुरुआती मान flex-start है, और align-items तथा align-content का शुरुआती मान stretch है।
आइटम के गुण
कंटेनर का हर बच्चा एक आइटम है, और उसके तीन flex गुण तय करते हैं कि उसे कितनी जगह मिलती है। flex-grow का शुरुआती मान 0 है और वह खाली जगह को गुणांक के अनुपात में लेता है। flex-shrink का शुरुआती मान 1 है और बताता है कि जगह कम पड़ने पर आइटम कितना छोड़ता है। flex-basis का शुरुआती मान auto है, जो आइटम का अपना आकार लेता है; लंबाई या प्रतिशत पहले से आकार तय करता है।
flex: flex-grow flex-shrink flex-basis; शुरुआती मान है 0 1 autoटूल क्या नहीं लिखता
- order, align-self और gap गुण, जिन्हें आप कंटेनर या किसी आइटम में हाथ से जोड़ सकते हैं।
- बारहवें से आगे के आइटम: टूल 12 आइटम पर रुकता है, इसलिए लंबी सूची के नियम हाथ से लिखने होंगे।
हल किया हुआ उदाहरण: तीन आइटमों वाला एक टूलबार जो नई लाइन में जाता है
क्लास का नाम toolbar है, flex-wrap wrap है, justify-content space-between है और align-items center है। पहले आइटम के शुरुआती मान हैं, इसलिए उसका कोई नियम नहीं बनता। दूसरा आइटम खाली जगह भरने के लिए बढ़ता है, basis 0 के साथ। तीसरा अपना आकार रखता है, basis 200px के साथ। टूल दूसरे और तीसरे आइटम के लिए ही नियम लिखता है।
| आइटम | flex-grow | flex-shrink | flex-basis |
|---|---|---|---|
| 1 | 0 | 1 | auto |
| 2 | 1 | 1 | 0 |
| 3 | 0 | 0 | 200px |
अक्सर पूछे जाने वाले सवाल
flex-grow और flex-basis में क्या फर्क है?
flex-basis वह आकार है जिससे आइटम खाली जगह बँटने से पहले शुरू करता है। फिर flex-grow तय करता है कि बची जगह कैसे बँटे, हर आइटम के गुणांक के अनुपात में। basis 0 और grow 1 वाला आइटम वह जगह लेता है जो बाकी छोड़ते हैं।
उदाहरण के पहले आइटम पर कोई नियम क्यों नहीं है?
उसके मान गुणों के शुरुआती मान हैं: flex-grow 0, flex-shrink 1 और flex-basis auto। ब्राउज़र इन मानों को बिना नियम के इस्तेमाल करता है, इसलिए टूल केवल ऐसे आइटम पर नियम लिखता है जो इनसे अलग हो।
align-items का शुरुआती मान stretch क्यों है?
CSS Flexible Box Layout Module align-items का शुरुआती मान stretch देता है, इसलिए जब तक आप कोई और मान न चुनें, आइटम क्रॉस अक्ष पूरा भरते हैं। टूल उसी मान से शुरू करता है, ताकि CSS वही करे जो ब्राउज़र बिना घोषणा के करता है।
basis में केवल px, rem, em और प्रतिशत क्यों?
ये वही इकाइयाँ हैं जिन्हें टूल जाँचता है। auto या बिना इकाई वाला 0 भी मान्य है। दूसरी इकाइयाँ, जैसे vw, यहाँ नहीं दी जातीं, इसलिए आपके लेआउट को जरूरत हो तो उन्हें हाथ से लिखें।
क्या आइटमों के बीच gap जोड़ा जा सकता है?
इस टूल से नहीं। यह पाँच कंटेनर गुण और आइटम के flex मान ही लिखता है। CSS कॉपी करने के बाद gap कंटेनर के नियम में हाथ से जोड़ें।
क्या मेरा बनाया CSS कहीं भेजा जाता है?
नहीं। पूर्वावलोकन और CSS आपके ब्राउज़र में बनते हैं। कुछ भी सहेजा नहीं जाता और हमारे सर्वर को नहीं भेजा जाता, इसलिए पेज छोड़ने से पहले CSS कॉपी कर लें।
स्रोत
आँकड़े और टेक्स्ट आखिरी बार गुरुवार, 12 नवंबर 2026 को जाँचे गए।