CSS Flexbox Property Kya Hoti Hai ?
Flexbox yaani Flexible Box Layout ek CSS module hai jo elements ko container ke andar efficiently arrange karne ka tareeka provide karta hai. Yeh traditional float aur positioning methods ka ek behtareen alternative hai. Flexbox ki madad se hum easily elements ko horizontally aur vertically align kar sakte hain, chahe unki size dynamic ho ya na ho.
Flexbox ke Main Features:
- Flexible aur responsive layout design
- Horizontal aur vertical alignment easy hota hai
- Equal spacing aur dynamic resizing
- Parent-child relationship me elements ka control better hota hai
- Yeh complex layouts ko simple aur efficient banata hai
Flexbox ka Basic Syntax:
Ek flex container banane ke liye, humein uske parent element par display: flex; lagana hota hai.
.container {
display: flex;
}Yeh container ke andar ke sabhi child elements ko ek flex item bana dega.
1. Flex Container Properties
Flexbox system tab activate hota hai jab kisi element ko flex container declare kiya jata hai. Yeh container un sabhi elements ko control karta hai jo uske andar hote hain (flex items).
Agar kisi parent element ko display: flex; ya display: inline-flex; diya jaye, to wo flex container ban jata hai, aur uske andar ke elements flex items ban jate hain.
Flex Container ka Kaam Kya Hai?
- Child elements ka alignment manage karna (horizontal & vertical dono).
- Items ko wrap ya nowrap karna.
- Items ke beech ka space adjust karna.
- Ek dynamic aur responsive layout create karna.
Flex container ke andar jo properties hoti hain, unka use karke hum child elements ka layout aur behavior define kar sakte hain.
(a) display: flex;
Yeh property kisi bhi element ko flex container bana deti hai. Iske bina flexbox ka structure kaam nahi karega.
.container {
display: flex;
}Jaise hi display: flex; apply karenge, container ke andar ke elements automatically flex items ban jayenge.
(b) flex-direction :
flex-direction ek CSS Flexbox property hai jo flex container ke andar items ka direction define karti hai. Yeh decide karta hai ki flex items horizontal (row-wise) ya vertical (column-wise) arrange honge.
Jab hum kisi container ko display: flex; dete hain, tab uske andar ke elements by default row direction me align hote hain. Lekin flex-direction ka use karke hum iska flow change kar sakte hain.
.container {
flex-direction: row; /* Default value */
}Iski possible values hain:
row(Default) → Items left to right arrange hote hainrow-reverse→ Items right to left arrange hote haincolumn→ Items top to bottom arrange hote haincolumn-reverse→ Items bottom to top arrange hote hain
(c) flex-wrap :
Jab hum display: flex; use karte hain, to by default saare flex items ek hi line me adjust hone ki koshish karte hain, chahe container kitna bhi chhota ho. Agar container ke andar zyada items ho jayein aur jagah kam ho, to items overlap ho sakte hain ya squeeze ho sakte hain.
Yahi problem solve karne ke liye flex-wrap property ka use hota hai. Yeh decide karta hai ki flex items ek hi line me rahenge ya multiple lines me wrap honge.
.container {
flex-wrap: wrap;
}Iski possible values hain:
nowrap(Default) → Items ek line me rahengewrap→ Items multiple lines me aa sakte hainwrap-reverse→ Items wrap honge lekin ulte order me
(d) justify-content :
justify-content ek important Flexbox property hai jo flex container ke andar flex items ko horizontally align karne ke liye use hoti hai. Yeh property tab kaam karti hai jab container ka display: flex; set hota hai.
Agar aapke flex items ka total width container se kam hai, to justify-content decide karta hai ki items ko kaise space diya jaye – left align, center align, right align ya equal spacing ke saath.
.container {
justify-content: center;
}Iski possible values hain:
flex-start(Default) → Items left se start hongeflex-end→ Items right align hongecenter→ Items center me hongespace-between→ First aur last item edges pe aur beech ke items evenly spaced hongespace-around→ Sabhi items ke aas paas equal space hogaspace-evenly→ Sabhi items ke beech me equal space hoga
(e) align-items :
align-items ek CSS Flexbox property hai jo flex container ke andar flex items ko vertically align karne ke liye use hoti hai. Yeh property sirf ek row me hone wale items par apply hoti hai aur unka alignment control karti hai. Agar flex items multiple lines me hote hain (jab flex-wrap: wrap; apply hota hai), to unka vertical alignment align-content se hota hai, na ki align-items se.
Jab hum ek flex container banate hain (display: flex; use karke), to uske andar ke elements (flex items) default roop se top se align hote hain. align-items ka use karke hum in elements ko top, center, bottom ya stretch karke align kar sakte hain.
.container {
align-items: center;
}Iski possible values hain:
stretch(Default) → Items container ke height tak stretch ho jayengeflex-start→ Items top se start hongeflex-end→ Items bottom pe align hongecenter→ Items center me hongebaseline→ Items ka text baseline pe align hoga
2. Flex Item Properties
Har individual flex item ko control karne ke liye ye properties use hoti hain.
(a) order :
order ek Flexbox property hai jo kisi flex item ki display order ko control karti hai. By default, sabhi flex items ka order 0 hota hai, aur wo HTML me likhne ke sequence ke hisaab se display hote hain. Lekin agar aap kisi item ka position change karna chahte hain bina HTML ka structure modify kiye, to aap order property ka use kar sakte hain.
.item {
order: 2;
}- Default value: 0
- Jiska order value kam hota hai wo pehle display hota hai.
Agar sabhi items ka order: 0; hai to HTML structure ke according arrange honge.
(b) flex-grow :
flex-grow ek CSS Flexbox property hai jo flex items ko available extra space ko occupy karne ka control deti hai. Iska use tab hota hai jab ek flex container ke andar extra space ho, aur hume decide karna ho ki kaunsa item kitna space lega.
.item {
flex-grow: 1;
}Agar sabhi items ka flex-grow 1 hai to sabhi barabar size ke honge. Agar ek ka flex-grow: 2; hai aur doosre ka 1, to pehla item double space lega.
(c) flex-shrink :
flex-shrink ek CSS Flexbox property hai jo define karti hai ki jab container ki space kam ho jaye to ek flex item kitna shrink (chhota) hoga. Yeh property tab kaam aati hai jab container ka size limited ho ya dynamically change ho raha ho.
Agar ek flex container me multiple items hain aur screen ya parent container ki width kam ho rahi hai, to flex-shrink decide karega ki kaunsa item kitna compress hoga
.item {
flex-shrink: 0;
}Agar kisi item ka flex-shrink: 0; hai, to wo shrink nahi hoga.
(d) flex-basis :
flex-basis ek CSS property hai jo kisi flex item ka initial size define karti hai, before flex-grow aur flex-shrink properties apply hoti hain. Yeh property batati hai ki kisi flex item ka default size kya hoga, bina kisi extra space distribute kiye.
.item {
flex-basis: 100px;
}Agar flex-basis: auto; hota hai to item apne content ke size ke hisaab se adjust hota hai.
(e) align-self :
align-self ek CSS Flexbox property hai jo individual flex items ka vertical alignment control karti hai. Yeh parent container ke align-items property ke upar override karke kisi specific flex item ka alignment change karne ke liye use hoti hai. Matlab, agar kisi container me multiple flex items hain, to sirf ek ya kuch selected items ko alag se align karne ke liye align-self ka use kiya jata hai.
.item {
align-self: flex-end;
}Iski possible values align-items ki tarah hi hoti hain.
CSS Flexbox ek bahut hi powerful aur easy-to-use layout model hai jo web designing me flexible aur dynamic structures banane me madad karta hai. Agar aapko responsive aur modern design banana hai to Flexbox ka use karna kaafi beneficial hoga.
Quiz: Test Your Knowledge on CSS Flexbox Property
Bonus: Practical Application!
Aaj hi apne webpage par CSS Flexbox ka istemal karke dekhein!
CSS Flexbox ko sahi tareeke se samajhne ke liye different properties jaise display: flex, justify-content, align-items, flex-direction, aur flex-wrap ka upayog karein aur apne webpage ke layout ko aur bhi responsive aur dynamic banayein.