Flexbox is a CSS layout model that distributes space along a single axis, making it easy to align and distribute items in a container.

Can I adjust the gap between items?

Yes, use the Gap slider to control spacing between flex items.

How do I copy the CSS?

Click the Copy CSS button to get the flex container CSS code ready to paste.

टूल्स

फ़्लेक्सबॉक्स प्रॉपर्टीज़ विज़ुअलाइज़ करें और CSS कोड कॉपी करें

justify-content: center

align-items: center

flex-direction: row

gap12px

flex-wrap: wrap

आइटम्स6

CSS Output

display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 12px;

ग्रेडिएंट जनरेटर

CSS के लिए ग्रेडिएंट बनाएँ

बॉक्स शैडो

सुंदर CSS बॉक्स शैडो बनाएँ

ग्लासमॉर्फ़िज़्म

फ्रॉस्टेड ग्लास CSS प्रभाव

कलर पिकर

रंग चुनें और HEX, RGB, HSL कन्वर्ट करें

CSS जनरेटर

विभिन्न CSS प्रभाव जनरेट करें

कलर कंट्रास्ट

WCAG मानकों के अनुसार टेक्स्ट पठनीयता जांचें