Flexbox — Basics
Flexbox (Flexible Box Layout) ek "one-dimensional" layout system hai — ek row YA ek column mein items ko arrange/align/distribute karne ke liye designed. display: flex parent ko "flex container" banata hai, uske direct children automatically "flex items" ban jaate hain.
Flexbox se pehle, centering (especially vertical) CSS mein notoriously mushkil tha (hacky tricks chahiye hote the) — flexbox ne "align-items: center; justify-content: center;" se ek line mein solve kar diya.
.container {
display: flex; /* bas itna kaafi hai flexbox shuru karne ke liye */
}
.container {
display: flex;
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering */
height: 300px;
}
/* Ab andar ka content perfectly center hoga — kabhi mushkil tha! */- display: flex = one-dimensional layout (row ya column)
- justify-content/align-items = alignment/centering, bahut easy
- Direct children automatically "flex items" ban jaate hain
Flexbox mein do axes hain: main axis (jis direction mein flex-direction point karta hai — row mein horizontal), cross axis (perpendicular — row mein vertical). Ye concept samajhna zaroori hai kyunki justify-content aur align-items alag axes ko target karte hain.
.row-container {
display: flex;
flex-direction: row;
/* Main axis = horizontal (left to right)
Cross axis = vertical (top to bottom) */
}
.column-container {
display: flex;
flex-direction: column;
/* Main axis = vertical (ab ulta!)
Cross axis = horizontal */
}Flexbox almost universally supported hai modern browsers mein (IE11 mein partial/buggy support tha, jo ab largely irrelevant hai) — production use ke liye completely safe hai aajkal.
/* Modern CSS — flexbox worry-free use kar sakte ho: */
.container {
display: flex;
}
/* Koi vendor prefixes ya fallbacks zaroori nahi 2024+ mein */