Stax

CSS Flexbox प्लेग्राउंड

Flexbox प्रॉपर्टी विज़ुअली एक्सपेरिमेंट करें और CSS कॉपी करें।

1
2
3
4
5
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

CSS Flexbox प्लेग्राउंड क्या है?

यह interactive playground flexbox properties को visually experiment करने का जगह है। display, justify-content, align-items, flex-direction — सब properties live देखें और CSS code copy करें।

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

  1. Container properties adjust करें (justify-content, align-items)।
  2. Items add/remove करें।
  3. Item-specific properties (flex-grow, align-self) try करें।
  4. Live result देखें।
  5. Final CSS code copy करें।

Key flexbox properties

  • display: flex — container बनाएं
  • flex-direction — row या column
  • justify-content — main axis alignment
  • align-items — cross axis alignment
  • flex-wrap — multi-line layouts

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

Flexbox क्या है?
Flexbox CSS layout module है — single dimension (row या column) में items को flexibly arrange करता है। Container पर display: flex; होता है, items अंदर automatic align हो जाते हैं। Navigation bars, card layouts, vertical centering के लिए perfect।
Justify-content और align-items में क्या फर्क है?
Main axis (default horizontal) के लिए justify-content: flex-start, center, space-between, space-around। Cross axis (vertical) के लिए align-items: flex-start, center, stretch, baseline। Visual alignment के लिए दोनों ज़रूरी।
Flex grow, shrink, basis क्या हैं?
flex-basis = item की initial size। flex-grow = बची जगह कैसे बँटे (0 = fixed, 1 = equal share)। flex-shrink = कम जगह में कैसे सिकुड़े। Shorthand: flex: 1 1 auto = grow, shrink, basis।
Flexbox vs Grid कब इस्तेमाल करें?
Flexbox — 1-dimensional layouts (नवबार, button rows, vertical centering)। Grid — 2-dimensional (page layouts, card grids, dashboards)। Modern designs में दोनों एक साथ इस्तेमाल होते हैं। दोनों सीखें।

संबंधित टूल्स