CSS Flexbox Property Kya Hoti Hai?

Introduction to Flexbox

Flexbox (Flexible Box Layout) ek CSS module hai jo elements ko ek container ke andar efficiently arrange karne ka tareeka provide karta hai. Yeh one-dimensional layout model hai, yaani yeh items ko ek line (row ya column) me arrange karta hai. Flexbox ki madad se hum easily elements ko horizontally aur vertically align kar sakte hain, chahe unki size dynamic ho ya na ho.

1. Flex Container Properties

Ek flex container banane ke liye, humein parent element par display: flex; lagana hota hai. Iske baad, uske direct child elements "flex items" ban jaate hain. Yahaan container par apply hone wali properties hain:

A. flex-direction

Yeh property flex items ke direction ko define karti hai (main-axis).

• row (default): Left to right.
• row-reverse: Right to left.
• column: Top to bottom.
• column-reverse: Bottom to top.

.container { flex-direction: column; }

B. flex-wrap

Yeh property decide karti hai ki items ek hi line me rahenge ya multiple lines me wrap honge.

• nowrap (default): Items ek hi line me shrink ho jaayenge.
• wrap: Items zaroorat padne par agli line me chale jaayenge.
• wrap-reverse: Items ulte order me wrap honge.

.container { flex-wrap: wrap; }

C. justify-content

Yeh property items ko main-axis (horizontally agar direction row hai) ke along align karti hai.

• flex-start (default): Start me align.
• flex-end: End me align.
• center: Center me align.
• space-between: First aur last item edges par, baaki evenly spaced.
• space-around: Sabhi items ke around equal space.
• space-evenly: Sabhi items ke beech me equal space.

.container { justify-content: space-between; }

D. align-items

Yeh property items ko cross-axis (vertically agar direction row hai) ke along align karti hai.

• stretch (default): Container ki poori height le lete hain.
• flex-start: Top par align.
• flex-end: Bottom par align.
• center: Vertically center me align.
• baseline: Unke text baseline par align.

.container { align-items: center; }

2. Flex Item Properties

Yeh properties individual flex items par apply hoti hain:

A. order

Yeh property item ka visual order badalti hai. Default value 0 hoti hai. Kam value wala item pehle aata hai.

.item-1 { order: 2; } 
.item-2 { order: 1; }

B. flex-grow

Yeh batata hai ki item available extra space ka kitna hissa lega. Default 0 hota hai (extra space nahi lega).

.item { flex-grow: 1; }

C. flex-shrink

Yeh batata hai ki space kam hone par item kitna shrink hoga. Default 1 hota hai.

.item { flex-shrink: 0; /* Will not shrink */ }

D. align-self

Yeh individual item ko cross-axis par align karta hai, parent ke align-items ko override karke.

.special-item { align-self: flex-end; }

Key Takeaways

• Flexbox one-dimensional layout ke liye hota hai (row ya column).
• Container par display: flex; lagana zaroori hai.
• justify-content main-axis (aam taur par horizontal) alignment control karta hai.
• align-items cross-axis (aam taur par vertical) alignment control karta hai.
• flex-grow, flex-shrink, aur flex-basis se items ki flexibility control hoti hai.