CSS Flexbox Cheatsheet — จัดวาง Layout ให้ตรงใจ

Container Properties (บน parent element)

.container {
  display: flex;

  /* แกนหลัก (main axis) */
  flex-direction: row;           /* → ซ้ายไปขวา (default) */
  flex-direction: column;        /* ↓ บนลงล่าง */
  flex-direction: row-reverse;   /* ← ขวาไปซ้าย */

  /* wrapping */
  flex-wrap: nowrap;   /* ไม่ขึ้นบรรทัดใหม่ (default) */
  flex-wrap: wrap;     /* ขึ้นบรรทัดใหม่เมื่อเต็ม */

  /* shorthand */
  flex-flow: row wrap;
}

Alignment บน Main Axis (justify-content)

.container {
  /* ↔ จัดแนวบนแกนหลัก */
  justify-content: flex-start;     /* ชิดซ้าย (default) */
  justify-content: flex-end;       /* ชิดขวา */
  justify-content: center;         /* กลาง */
  justify-content: space-between;  /* ห่างเท่ากัน ชิดขอบ */
  justify-content: space-around;   /* ห่างเท่ากัน มี margin รอบ */
  justify-content: space-evenly;   /* ห่างเท่ากันทุกช่อง */
}

flex-start:    [A][B][C]         ]
center:        [    [A][B][C]    ]
flex-end:      [         [A][B][C]
space-between: [A]    [B]    [C]]
space-around:  [ [A]  [B]  [C] ]
space-evenly:  [  [A]  [B]  [C] ]

Alignment บน Cross Axis (align-items)

.container {
  /* ↕ จัดแนวบนแกนขวาง */
  align-items: stretch;     /* ยืดเต็มความสูง (default) */
  align-items: flex-start;  /* ชิดบน */
  align-items: flex-end;    /* ชิดล่าง */
  align-items: center;      /* กลาง */
  align-items: baseline;    /* ตาม baseline ของ text */
}

Centering ทุกทิศทาง

/* centering แบบง่ายที่สุด */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* centering เดี่ยว ด้วย margin: auto */
.child {
  margin: auto; /* ดูดพื้นที่ว่างทุกด้าน */
}

Item Properties (บน child element)

.item {
  /* order — เปลี่ยน visual order โดยไม่เปลี่ยน DOM */
  order: 0;   /* default */
  order: -1;  /* ขึ้นไปก่อน */
  order: 1;   /* ลงไปหลัง */

  /* flex-grow — สัดส่วนการขยาย */
  flex-grow: 0;  /* ไม่ขยาย (default) */
  flex-grow: 1;  /* ขยายเต็มพื้นที่ที่เหลือ */
  flex-grow: 2;  /* ขยายเป็น 2 เท่าของ flex-grow: 1 */

  /* flex-shrink — สัดส่วนการหด */
  flex-shrink: 1;  /* หดได้ (default) */
  flex-shrink: 0;  /* ไม่หด (ขนาดคงที่) */

  /* flex-basis — ขนาดเริ่มต้น */
  flex-basis: auto;   /* ใช้ width/height (default) */
  flex-basis: 200px;  /* กำหนดขนาดเริ่มต้น */
  flex-basis: 0;      /* เริ่มจาก 0 (ให้ grow จัดการทั้งหมด) */

  /* shorthand */
  flex: 1;           /* flex: 1 1 0 */
  flex: auto;        /* flex: 1 1 auto */
  flex: none;        /* flex: 0 0 auto (ไม่ grow ไม่ shrink) */
}

Use Cases จริง

Navigation Bar

nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-logo {
  flex: none;          /* ขนาดคงที่ */
  margin-right: auto;  /* ดันลิงก์ไปชิดขวา */
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

Card Grid ที่ responsive โดยไม่ใช้ media query

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px;   /* grow ได้, shrink ได้, ขั้นต่ำ 300px */
  max-width: 400px;  /* ไม่ใหญ่เกิน */
}

Holy Grail Layout (header + sidebar + content + footer)

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  display: flex;
  flex: 1;  /* ยืดเต็มพื้นที่ที่เหลือ */
  gap: 1rem;
}

aside {
  flex: 0 0 240px;   /* sidebar ขนาดคงที่ */
}

article {
  flex: 1;           /* content ยืดเต็มพื้นที่ */
}

Flexbox vs Grid

Flexbox กับ Grid ใช้ร่วมกันได้ — ใช้ Grid สำหรับ page structure แล้วใช้ Flexbox ภายใน component