1️⃣ flex-direction: column

By default Flexbox horizontal hota hai, par vertical banane ke liye flex-direction: column; use hota hai. Isse items **top → bottom** arrange honge. :contentReference[oaicite:0]{index=0}

.container{
  display: flex;
  flex-direction: column;
}

2️⃣ justify-content (Vertical Alignment)

Vertical Flexbox me justify-content ka matlab hai **top to bottom main axis position** control. :contentReference[oaicite:1]{index=1}

👉 Top Start

justify-content: flex-start;

👉 Center

justify-content: center;

👉 Bottom

justify-content: flex-end;

3️⃣ align-items (Horizontal Control)

Vertical Flexbox me align-items ka matlab hai child items ko **left → center → right** position karna (cross axis). :contentReference[oaicite:2]{index=2}

👉 Left

align-items: flex-start;

👉 Center

align-items: center;

👉 Right

align-items: flex-end;

4️⃣ align-self (Single Item Override)

Agar aap chaho ki “sirf ek item” alag align ho, to align-self use hota hai. :contentReference[oaicite:3]{index=3}

👉 Example

.override{
  align-self: flex-end;
}

5️⃣ flex-wrap & flex-flow

Normal vertical flow me items niche aate rahenge, par agar bahut items ho aur jagah chhoti ho, to flex-wrap use karke wrap kara sakte ho. :contentReference[oaicite:4]{index=4}

.container{
  display:flex;
  flex-direction:column;
  flex-wrap: wrap;
}