🎨 CSS Lesson 06 — Flexbox

🧭 Flexbox = 1D Layout — row ဒါမဟုတ် column တစ်ကြောင်း/တစ်ကော် layout ဆောက်ဖို့
2D (row AND column တပြိုင်နက်) → CSS Grid (Lesson 07)

1. display: flex

.container {
  display: flex;   /* flex container ဖန်တီး */
}
/* direct children တွေ flex items ဖြစ်သွားတယ် */

2. flex-direction

flex-direction: row;            /* default → */
flex-direction: row-reverse;    /* ← */
flex-direction: column;         /* ↓ */
flex-direction: column-reverse; /* ↑ */

3. justify-content — Main Axis

justify-content: flex-start;    /* start (default) */
justify-content: flex-end;      /* end */
justify-content: center;        /* center ✅ most useful */
justify-content: space-between; /* gaps between ✅ */
justify-content: space-around;  /* equal gaps around */
justify-content: space-evenly;  /* perfectly equal gaps */

4. align-items — Cross Axis

align-items: stretch;     /* default — full height */
align-items: flex-start;  /* top */
align-items: flex-end;    /* bottom */
align-items: center;      /* center ✅ vertical centering! */
align-items: baseline;    /* text baseline align */

5. ⭐ Perfect Centering

.center-everything {
  display: flex;
  justify-content: center;  /* horizontal */
  align-items: center;      /* vertical */
  /* Done! ✅ */
}

6. flex-wrap

flex-wrap: nowrap;   /* default — squeeze into one line */
flex-wrap: wrap;     /* wrap to next line ✅ */
flex-wrap: wrap-reverse;

7. flex-grow / flex-shrink / flex-basis

flex-grow: 1;    /* remaining space ကို grow ဖို့ */
flex-shrink: 1;  /* shrink ရမလား (default: 1) */
flex-basis: 200px; /* starting size */

/* shorthand */
flex: 1;           /* grow:1, shrink:1, basis:0 */
flex: 0 0 200px;   /* grow:0, shrink:0, basis:200px (fixed) */

8. gap

gap: 16px;         /* row-gap + column-gap equal */
gap: 10px 20px;    /* row-gap column-gap */
row-gap: 10px;
column-gap: 20px;

9. order & align-self

/* order — visual reorder (HTML order မပြောင်းဘဲ) */
.item-3 { order: -1; }  /* ← ရှေ့ ရောက်သွားမယ် */

/* align-self — individual cross-axis */
.item { align-self: flex-start | center | flex-end | stretch }

10. Real Use — Navbar with Flexbox

nav { display:flex; justify-content:space-between; align-items:center; }