Flexbox
Common Flexbox Patterns
Navbar, Cards, Centering
💡 Ye "recipes" hain — proven patterns jo baar-baar real-world designs mein dikhte hain (navbar, card grids), jaise cooking recipes jo baar-baar useful hoti hain, khud se experiment karne ke bajaye.
Flexbox ke bahut common real-world use-cases hain: navigation bars (logo left, links right), equal-height cards in a row, perfectly centered content (modals, hero sections), aur "sticky footer" (footer hamesha bottom par, chahe content kam ho).
/* Navbar — logo left, links right: */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Equal-height cards: */
.card-row {
display: flex;
gap: 20px;
}
.card {
flex: 1; /* saare cards equal width AUR height (flex items stretch by default) */
}
/* Perfect centering (modal, hero): */
.centered {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Sticky footer: */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-content { flex: 1; } /* baaki space le leta hai, footer ko neeche push karta hai */🎨
Ye "recipes" hain — proven patterns jo baar-baar real-world designs mein dikhte hain (navbar, card grids), jaise cooking recipes jo baar-baar useful hoti hain, khud se experiment karne ke bajaye.
1 / 2
⚡ Quick Recap
- Navbar = justify-content: space-between + align-items: center
- Equal cards = flex: 1 par har card
- Sticky footer = flex-direction: column + flex: 1 on main content
Is page mein (2 subtopics)
flex-wrap + flex-basis se ek simple responsive grid ban sakta hai (Grid layout se pehle, ya simple cases ke liye) — cards automatically wrap hote hain jab space kam ho.
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 250px; /* min 250px, grow karega available space mein */
}
/* Screen chhoti hone par cards automatically next line mein wrap ho jaate hain */Tip: Simple responsive grids (jaha exact rows/columns control nahi chahiye) ke liye flex-wrap kaafi hai — jab precise 2D control chahiye (exact rows AND columns), CSS Grid (aage category) better fit hai.
Modern flexbox mein gap property items ke beech spacing ke liye standard hai — purane margin-based approaches (jaha last item ka extra margin manually hataना padta tha) se bahut cleaner.
/* Modern (preferred): */
.container {
display: flex;
gap: 20px; /* clean, last item automatically theek handle hota hai */
}
/* Purana approach (avoid, extra complexity): */
/* .item { margin-right: 20px; }
.item:last-child { margin-right: 0; } — extra rule zaroori thi */Tip: gap property ab flexbox mein widely supported hai — purane margin-with-last-child-exception pattern ki zaroorat nahi rahi, gap use karna cleaner aur simpler hai.