CSS Flexbox (Horizontal) – Complete Easy Guide

Beginner friendly explanation with diagrams & live examples

1️⃣ display: flex;

Flexbox ek layout system hai jo items ko LEFT se RIGHT ek line me arrange karta hai.

[ Box 1 ] → [ Box 2 ] → [ Box 3 ]
Box
Box
Box
.container{
  display:flex;
}

2️⃣ justify-content (Horizontal Alignment)

Ye batata hai items line me kaha rahenge.

Center

Box
Box

Right

Box
Box

Space Between

Box
Box
Box
justify-content:center;
justify-content:flex-end;
justify-content:space-between;

3️⃣ align-items (Vertical Control)

Boxes ko upar, beech ya neeche set karta hai.

Box
Box
align-items:center;

4️⃣ gap & wrap

Box
Box
Box
Box
gap:20px;
flex-wrap:wrap;

5️⃣ flex (Box size control)

Big
Small
Small
.big{ flex:2; }
.small{ flex:1; }

6️⃣ align-self (Single box control)

Box
Special
Box
align-self:flex-end;

🎯 Final Conclusion

Flexbox horizontal layout banane ka sabse easy tareeqa hai. display:flex line banata hai, justify-content left/center/right karta hai, align-items vertical control karta hai, flex box size decide karta hai.