Flexbox Generator

Visually build CSS Flexbox layouts.

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

आइटम की संख्या: 5

लाइव पूर्वावलोकन

जनरेट किया गया CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
  gap: 8px;
}

इस टूल के बारे में

CSS Flexbox जनरेटर flex-direction, flex-wrap, justify-content, align-items और align-content जैसी सभी प्रमुख flexbox प्रॉपर्टी को समायोजित करके flex कंटेनर को दृश्य रूप से कॉन्फ़िगर करने देता है।

Flexbox एक-आयामी लेआउट (पंक्तियाँ या कॉलम) के लिए डिज़ाइन किया गया CSS लेआउट मॉड्यूल है। प्रत्येक प्रॉपर्टी कैसे इंटरैक्ट करती है यह समझना responsive UI बनाने के लिए महत्वपूर्ण है।

कैसे उपयोग करें

मुख्य अक्ष नियंत्रित करने के लिए flex-direction समायोजित करें।
flex-wrap सेट करें कि आइटम अगली पंक्ति में जाएं या नहीं।
मुख्य अक्ष के साथ आइटम वितरित करने के लिए justify-content उपयोग करें।
क्रॉस अक्ष के साथ आइटम संरेखित करने के लिए align-items उपयोग करें।
स्लाइडर से पूर्वावलोकन आइटम की संख्या बदलें।
जनरेट किया गया CSS कॉपी करने के लिए कॉपी क्लिक करें।

उपयोग के मामले

Frontend डेवलपर नेविगेशन बार, कार्ड ग्रिड और टूलबार लेआउट जल्दी प्रोटोटाइप करने के लिए उपयोग करते हैं। CSS शुरुआत करने वाले flexbox प्रॉपर्टी इंटरैक्शन दृश्य रूप से सीखते हैं।

अक्सर पूछे जाने वाले प्रश्न

align-items और align-content में क्या अंतर है? — align-items एकल पंक्ति में आइटम संरेखित करता है; align-content केवल कई पंक्तियाँ होने पर लागू होता है।
क्या flexbox दो-आयामी लेआउट के लिए काम करता है? — Flexbox एक-आयामी है। जटिल ग्रिड लेआउट के लिए CSS Grid उपयोग करें।
क्या flexbox सभी ब्राउज़र में समर्थित है? — हाँ। Flexbox Chrome, Firefox, Safari और Edge सहित सभी आधुनिक ब्राउज़र में पूरी तरह समर्थित है।