मोफत कनवर्टर
CSS फ्लेक्सबॉक्स लेआउट जनरेटर
थेट पूर्वावलोकनासह CSS फ्लेक्सबॉक्स लेआउट दृश्यमानपणे व्युत्पन्न करा. फ्लेक्स-दिशा, औचित्य-सामग्री, संरेखित-आयटम आणि बरेच काही समायोजित करा — विनामूल्य आणि क्लायंट-साइड.
थेट पूर्वावलोकन
1
2
3
4
5
फ्लेक्स-दिशा
फ्लेक्स-ओघ
न्याय्य-सामग्री
संरेखित-आयटम
अंतर (8px)
0px32px64px
CSS आउटपुट
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 8px;
}
.item {
padding: 1rem 1.5rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
min-width: 60px;
text-align: center;
}