CSS Flexbox जनरेटर
आपके ब्राउज़र में स्थानीय रूप से चलता हैFlexbox लेआउट विज़ुअली बनाएँ और CSS, HTML या Tailwind कॉपी करें
लाइव पूर्वावलोकन
मुख्य अक्ष → · क्रॉस अक्ष ↓ · row / nowrap
धारीदार क्षेत्र gap दूरी दिखाता है: पंक्ति अंतराल 12px · स्तंभ अंतराल 12px
स्रोत = HTML में स्थिति। order = CSS order, जो केवल दृश्य स्थान बदलता है।
3/24 · अधिकतम 24 आइटम।
गाइड अक्ष, स्रोत स्थिति, CSS order और gap दूरी दिखाते हैं। इन्हें कभी एक्सपोर्ट नहीं किया जाता।
जनरेट किया गया कोड
.flex-container में कंटेनर के नियम हैं; .flex-item-N में आइटम N के नियम हैं। चुना गया आइटम: .flex-item-1
/* Sample box styles that match the preview */
.flex-container {
box-sizing: border-box;
padding: 12px;
border-width: 1px;
border-style: dashed;
border-color: #94a3b8;
border-radius: 8px;
}
.flex-item {
box-sizing: border-box;
margin: 0;
padding: 12px 16px;
border-width: 2px;
border-style: solid;
font-size: 14px;
line-height: 20px;
border-color: #6366f1;
border-radius: 6px;
background: #eef2ff;
color: #1e1b4b;
}
/* Flexbox layout */
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 12px;
width: 100%;
height: 220px;
}
.flex-item.flex-item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
.flex-item.flex-item-2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
.flex-item.flex-item-3 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
संपादन करते ही कोड लाइव अपडेट होता है।
आपके ब्राउज़र में स्थानीय रूप से चलता है। लेआउट सेटिंग्स इस डिवाइस के ब्राउज़र स्टोरेज में सहेजी जा सकती हैं।
CSS Flexbox जनरेटर
Flexbox लेआउट दृश्य रूप से बनाएँ और प्रोडक्शन-तैयार CSS, HTML या Tailwind क्लास कॉपी करें।
उपयोग कैसे करें
कोई प्रीसेट चुनें या कंटेनर समायोजित करें। flex-grow, flex-shrink, flex-basis, order और align-self संपादित करने के लिए आइटम पर क्लिक करें या कीबोर्ड से चुनें। आइटम जोड़ें, हटाएँ और क्रम बदलें, फिर CSS, HTML + CSS या Tailwind कॉपी या डाउनलोड करें।
विज़ुअल लर्निंग सहायता
गाइड वर्तमान दिशा और रैपिंग के अनुसार मुख्य और क्रॉस अक्ष बनाते हैं, हर आइटम पर स्रोत स्थिति और CSS order लिखते हैं, और आइटम व पंक्तियों के बीच की gap दूरी को धारियों से दिखाते हैं।
सीमाएँ और गोपनीयता
अधिकतम 24 आइटम। लंबाई में गैर-ऋणात्मक px, rem, em, %, vw और vh मान स्वीकार हैं; calc() और कस्टम CSS स्वीकार नहीं। पूर्वावलोकन क्षैतिज, बाएँ-से-दाएँ लेखन मोड मानता है। सब कुछ आपके ब्राउज़र में चलता है और सेटिंग्स लोकल स्टोरेज में सहेजी जा सकती हैं।
