Flex Item Properties
flex-grow — extra space available hone par item kitna "grow" kare (proportion, default 0 — grow nahi karta). flex-shrink — space kam padne par item kitna "shrink" kare (default 1 — shrink karta hai). order — visual order badalna (bina HTML change kiye, default 0, kam number pehle aata hai). align-self — individual item ke liye align-items override karna.
.item {
flex-grow: 1; /* extra space available hone par barabar grow karo */
}
.item-priority {
flex-grow: 2; /* doosron se DOUBLE grow karega */
}
.item-fixed {
flex-shrink: 0; /* kabhi shrink nahi hoga, chahe space kam ho */
}
.item-first {
order: -1; /* HTML mein kahi bhi ho, visually sabse pehle dikhega */
}- flex-grow = extra space proportion, flex-shrink = space-kami mein proportion
- order = visual reordering, HTML change kiye bina
- flex: 1 shorthand = equal space distribution
flex-basis item ki "starting size" set karta hai (grow/shrink hone se PEHLE) — width/height jaisa hi, lekin flex context mein. flex-basis: 0 ka matlab hai "content size ignore karo, sirf flex-grow proportion follow karo".
.item {
flex-basis: 200px; /* starting size 200px, phir grow/shrink hoga */
}
.equal-items {
flex: 1 1 0; /* flex-basis: 0 — sab equal size, content-size ignore */
}Flex items default se apni content se zyada shrink nahi hote (min-width: auto implicit hai) — jo overflow issues create kar sakta hai. Explicit min-width: 0 set karna is problem ka common fix hai (especially text truncation ke saath).
.item {
flex: 1;
min-width: 0; /* content ko shrink hone do, overflow avoid karo */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}