Flexbox responsive

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 होते हैं।

.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 करें।

.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); }
}