# Flexbox responsive — उत्तरदायी और मोबाइल-प्रथम डिज़ाइन

Source: https://www.geekswithgeeks.com/hi/responsive-design/flexbox-responsive

> Linear layouts के लिए Grid से simpler — Flexbox के flex-wrap और gap का उपयोग करके layouts बनाएँ जो stack और reflow हो।

## Mobile के लिए flex-wrap

डिफ़ॉल्ट रूप से, flexbox items को एक row में रखता है। Items को next line पर wrap करने देने के लिए `flex-wrap: wrap` जोड़ें जब space tight हो। Flexible item sizing के लिए `flex: 1 1 auto` के साथ combine करें।

## Flexbox के साथ responsive card layout

Cards small screens पर stack होते हैं और बड़ी screens पर expand होते हैं।

```css
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 calc(50% - 10px);
  min-width: 250px;
  background: white;
  padding: 16px;
  border-radius: 8px;
}

@media (max-width: 600px) {
  .card { flex: 1 1 100%; }
}
```

## Flexbox बनाम Grid: प्रत्येक कब उपयोग करें

**Flexbox** को 1D layouts (rows या columns) के लिए उपयोग करें। **Grid** को 2D layouts (rows और columns) के लिए उपयोग करें। Navigation, headers, footers के लिए Flexbox simpler है। Full-page layouts के लिए Grid अधिक powerful है।

## Mobile पर flex grow और shrink

अलग-अलग screens पर items कैसे expand और contract हों यह control करें।

```css
.flex-container { display: flex; gap: 1rem; }

.flex-item { flex: 1 1 100%; }

@media (min-width: 600px) {
  .flex-item { flex: 1 1 calc(50% - 0.5rem); }
}

@media (min-width: 1024px) {
  .flex-item { flex: 1 1 calc(25% - 0.75rem); }
}
```