CSS Flexbox กับ Grid: เมื่อใดควรใช้ Layout แบบไหน

CSS Flexbox และ CSS Grid เป็นระบบ Layout ที่ทรงพลังที่สุดสองระบบใน CSS สมัยใหม่ แม้ว่าบางครั้งพวกมันจะให้ผลลัพธ์ที่คล้ายกัน แต่พวกมันเป็นเครื่องมือที่แตกต่างกันโดยพื้นฐานที่ออกแบบมาสำหรับปัญหาที่แตกต่างกัน การเลือก Layout ที่ถูกต้องสำหรับแต่ละสถานการณ์ทำให้ CSS ของคุณชัดเจนขึ้น บำรุงรักษาง่ายขึ้น และคาดเดาได้มากขึ้น คู่มือนี้ให้การเปรียบเทียบอย่างละเอียดและตัวอย่างโค้ดที่ใช้งานได้จริง เพื่อให้คุณตัดสินใจ Layout ได้อย่างมั่นใจ

CSS Flexbox คืออะไร?

CSS Flexible Box Layout หรือที่เรียกกันทั่วไปว่า Flexbox เป็นโมเดล Layout แบบหนึ่งมิติ มันเชี่ยวชาญในการกระจายพื้นที่ตามแกนเดียว (แถวแนวนอนหรือคอลัมน์แนวตั้ง) Flexbox ทำให้รายการภายในคอนเทนเนอร์สามารถยืดหยุ่น เติบโต หด และจัดแนวตัวเองตามพื้นที่ว่าง

Flexbox ถูกออกแบบมาเพื่อแก้ปัญหา Layout ทั่วไปที่ยากอย่างเลื่องชื่อใน CSS แบบดั้งเดิม: การจัดองค์ประกอบให้อยู่กึ่งกลางแนวตั้ง การกระจายพื้นที่อย่างเท่าเทียมระหว่างองค์ประกอบพี่น้อง และการจัดลำดับเนื้อหาใหม่โดยไม่เปลี่ยน HTML ก่อน Flexbox นักพัฒนาพึ่งพา float, เทคนิค inline-block และ table layout เพื่อให้ได้เอฟเฟกต์เหล่านี้

แนวคิดหลักของ Flexbox

• Flex Container: องค์ประกอบแม่ที่ใช้ display: flex
• Flex Item: ลูกโดยตรงของ Flex Container
• แกนหลัก: ทิศทางหลักของ Layout (ค่าเริ่มต้นคือแนวนอน ควบคุมโดย flex-direction)
• แกนตัดขวาง: ทิศทางที่ตั้งฉากกับแกนหลัก
• Flex Grow/Shrink/Basis: คุณสมบัติที่ควบคุมว่าลูกขยายและหดเพื่อเติมพื้นที่ว่างอย่างไร

ตัวอย่าง Flexbox: แถบนำทาง

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.navbar__logo {
  flex-shrink: 0;
}

.navbar__links {
  display: flex;
  gap: 16px;
  list-style: none;
}

แถบนำทางนี้ใช้ Flexbox ผ่าน justify-content: space-between เพื่อดันโลโก้ไปทางซ้ายและลิงก์ไปทางขวา รายการถูกจัดกึ่งกลางแนวตั้งผ่าน align-items: center นี่คือ Layout แบบหนึ่งมิติคลาสสิกที่ Flexbox เป็นตัวเลือกที่เป็นธรรมชาติ

CSS Grid คืออะไร?

CSS Grid Layout เป็นระบบ Layout แบบสองมิติ มันจัดการทั้งแถวและคอลัมน์พร้อมกัน ให้คุณควบคุมตำแหน่งและขนาดขององค์ประกอบในโครงสร้างกริดได้อย่างแม่นยำ Grid ให้คุณกำหนดแทร็ก พื้นที่ และกฎการวางอย่างชัดเจน สร้าง Layout ที่ซับซ้อนด้วยโค้ดน้อยที่สุด

Grid ถูกออกแบบมาสำหรับ Layout ระดับหน้าและโครงสร้างคอมโพเนนต์ที่ซับซ้อน ซึ่งคุณต้องการควบคุมทั้งสองมิติ มันแนะนำแนวคิดเช่นพื้นที่กริดที่มีชื่อ, auto-fill และ auto-fit และขนาดแถวและคอลัมน์ที่ชัดเจน ทำให้ Layout ที่เคยเป็นไปไม่ได้กลายเป็นเรื่องตรงไปตรงมา

แนวคิดหลักของ Grid

• Grid Container: องค์ประกอบแม่ที่ใช้ display: grid
• Grid Item: ลูกโดยตรงของ Grid Container
• Grid Track: แถวและคอลัมน์ที่กำหนดโดย grid-template-rows และ grid-template-columns
• Grid Line: เส้นที่มองไม่เห็นที่สร้างขอบเขตของแทร็ก ใช้สำหรับการวาง
• Grid Area: พื้นที่ที่มีชื่อในกริดที่สามารถกำหนดรายการให้
• Gap: ระยะห่างระหว่างแทร็กกริด (แถวและคอลัมน์)

ตัวอย่าง Grid: เค้าโครงหน้า

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100vh;
}

.page__header  { grid-area: header; }
.page__sidebar { grid-area: sidebar; }
.page__content { grid-area: content; }
.page__footer  { grid-area: footer; }

เค้าโครงหน้านี้ใช้พื้นที่กริดที่มีชื่อเพื่อสร้างเค้าโครง sidebar แบบคลาสสิก ส่วนหัวและส่วนท้ายขยายข้ามสองคอลัมน์ ในขณะที่ sidebar และเนื้อหาวางเคียงข้างกัน โครงสร้างสองมิตินี้คือจุดที่ Grid โดดเด่นอย่างแท้จริง

Flexbox กับ Grid: เปรียบเทียบแบบเคียงข้าง

เมื่อใดควรใช้ Flexbox

เมื่อปัญหา Layout ของคุณเป็นแบบหนึ่งมิติเป็นหลัก Flexbox คือตัวเลือกที่ถูกต้อง นี่คือสถานการณ์ที่พบบ่อยที่สุด:

1. แถบนำทางและเมนู

การนำทางโดยพื้นฐานแล้วคือแถว (หรือคอลัมน์) ของรายการ Flexbox กระจายพื้นที่ระหว่างรายการ จัดการการล้นอย่างสง่างาม และทำให้การจัดแนวตั้งของรายการเป็นเรื่องง่าย คุณสมบัติ gap แทนที่การเว้นวรรครายการเมนูแบบเก่าที่ใช้ margin

2. การจัดเนื้อหาให้อยู่กึ่งกลาง

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

โซลูชันการจัดกึ่งกลางสามบรรทัดนี้เป็นหนึ่งในรูปแบบ Flexbox ที่เป็นที่รักมากที่สุด ก่อน Flexbox การจัดกึ่งกลางแนวตั้งต้องการแฮ็กที่เกี่ยวข้องกับ table-cell, absolute positioning พร้อม transform หรือเทคนิค line-height Flexbox ทำให้มันเป็นเรื่องง่ายดาย

3. การจัดแนวเนื้อหาในการ์ด

เมื่อการ์ดมีหัวข้อ คำอธิบาย และปุ่มดำเนินการ และคุณต้องการให้ปุ่มอยู่ด้านล่างเสมอโดยไม่คำนึงถึงความยาวของเนื้อหา Flexbox จัดการได้อย่างสง่างาม:

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

.card__content {
  flex: 1;
}

flex: 1 บนพื้นที่เนื้อหาทำให้มันเติบโตเพื่อเติมพื้นที่ว่าง ดันปุ่มไปที่ด้านล่างของการ์ด ทำงานได้ไม่ว่าการ์ดจะมีข้อความมากแค่ไหน

4. เค้าโครงแถวฟอร์ม

องค์ประกอบฟอร์มที่ต้องอยู่ในแถวและปรับขนาดได้ เช่น ช่องค้นหาและปุ่มส่ง เหมาะสำหรับ Flexbox ช่องป้อนข้อมูลสามารถเติบโตเพื่อเติมพื้นที่ว่างในขณะที่ปุ่มคงขนาดธรรมชาติของมัน

5. Media Object

รูปแบบ Media Object แบบคลาสสิก (รูปภาพทางซ้าย ข้อความทางขวา) เป็นคู่ที่เหมาะสมตามธรรมชาติสำหรับ Flexbox รูปภาพคงความกว้างธรรมชาติของมันในขณะที่ข้อความเติมพื้นที่ที่เหลือ

เมื่อใดควรใช้ CSS Grid

เมื่อ Layout ของคุณต้องการควบคุมทั้งแถวและคอลัมน์พร้อมกัน หรือต้องการวางรายการอย่างแม่นยำในโครงสร้างที่กำหนด Grid คือตัวเลือกที่ถูกต้อง

1. เค้าโครงทั้งหน้า

เค้าโครงระดับหน้าที่มีส่วนหัว, sidebar, พื้นที่เนื้อหา และส่วนท้ายเป็นกรณีการใช้งาน Grid แบบคลาสสิก พื้นที่กริดที่มีชื่อทำให้ Layout อ่านและบำรุงรักษาได้:

.layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "header  header"
      "content sidebar"
      "footer  footer";
  }
}

สังเกตว่าเบรกพอยต์ Responsive กำหนดนิยามเทมเพลตกริดใหม่อย่างง่ายดายอย่างไร รายการยังคงถูกกำหนดให้กับพื้นที่กริดของพวกมัน และ Layout ปรับโครงสร้างใหม่โดยอัตโนมัติ สิ่งนี้สะอาดกว่าการจัดเรียงคอนเทนเนอร์ Flexbox ใหม่ที่เบรกพอยต์ต่างๆ มาก

2. กริดการ์ดและแกลเลอรี

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

ประกาศเดี่ยวนี้สร้างกริดการ์ด Responsive ที่ปรับจำนวนคอลัมน์โดยอัตโนมัติตามความกว้างที่ใช้ได้ การ์ดแต่ละใบกว้างอย่างน้อย 280px แต่จะเติบโตเพื่อเติมพื้นที่ที่เหลือ ไม่จำเป็นต้องมี media query รูปแบบ auto-fill กับ minmax นี้เป็นหนึ่งในเทคนิค Grid ที่ทรงพลังที่สุด

3. เค้าโครงแดชบอร์ด

แดชบอร์ดที่มีวิดเจ็ตขนาดต่างๆ ที่ข้ามหลายแถวและคอลัมน์เหมาะสำหรับ Grid คุณสามารถวางรายการที่ตำแหน่งกริดเฉพาะและข้ามแทร็ก:

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
}

.widget--wide { grid-column: span 2; }
.widget--tall { grid-row: span 2; }
.widget--hero { grid-column: span 2; grid-row: span 2; }

4. เค้าโครงนิตยสารและบรรณาธิการ

เมื่อเนื้อหาต้องการซ้อนทับหรือวางในตำแหน่งที่ไม่อยู่ในลำดับ Grid เป็นระบบ Layout CSS เดียวที่รองรับสิ่งนี้แบบเนทีฟ คุณสามารถวางรายการบนเส้นกริดเฉพาะ สร้างองค์ประกอบที่ซ้อนทับโดยไม่ต้องใช้ absolute positioning

5. เค้าโครง Holy Grail

เค้าโครง "Holy Grail" ที่มีชื่อเสียง (ส่วนหัว, เนื้อหาสามคอลัมน์พร้อม sidebar ความกว้างคงที่และศูนย์กลางที่ยืดหยุ่น, ส่วนท้าย) ทำได้ง่ายดายด้วย Grid:

.holy-grail {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

การผสมผสาน Flexbox และ Grid

วิธีการที่มีประสิทธิภาพที่สุดไม่ใช่การเลือกระหว่าง Flexbox และ Grid แต่เป็นการผสมผสานพวกมันอย่างมีกลยุทธ์ รูปแบบทั่วไปและที่แนะนำคือการใช้ Grid สำหรับ Layout ระดับมหภาค (โครงสร้างหน้า) และ Flexbox สำหรับ Layout ระดับจุลภาค (ภายในคอมโพเนนต์)

ตัวอย่าง: แดชบอร์ดด้วย Grid และ Flexbox

/* Grid for the page structure */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}

/* Flexbox for the header content */
.dashboard__header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

/* Flexbox for sidebar menu items */
.dashboard__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

ในตัวอย่างนี้ Grid กำหนดโครงสร้างหน้าโดยรวม ในขณะที่ Flexbox จัดการการจัดแนวภายในแต่ละส่วน การแยกความกังวลนี้ทำให้ CSS ของคุณเป็นระเบียบและมีจุดประสงค์ชัดเจน

รูปแบบการออกแบบ Responsive

รูปแบบ Responsive ของ Flexbox: การตัดบรรทัด

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  flex-shrink: 0;
}

การตัดบรรทัดของ Flexbox เหมาะสำหรับรายการแท็ก, กลุ่มชิป และคอลเลกชันรายการใดๆ ที่ไหลไปยังบรรทัดถัดไปตามธรรมชาติเมื่อพื้นที่แนวนอนไม่เพียงพอ แต่ละรายการคงขนาดธรรมชาติของมัน

รูปแบบ Responsive ของ Grid: Auto-Fill

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

Grid auto-fill สร้างกริด Responsive อย่างแท้จริงโดยไม่ต้องมี media query ใดๆ จำนวนคอลัมน์ปรับโดยอัตโนมัติตามความกว้างของคอนเทนเนอร์ โดยแต่ละคอลัมน์กว้างอย่างน้อย 300px สิ่งนี้ทรงพลังกว่าการตัดบรรทัดของ Flexbox เพราะรายการจะยืดเพื่อเติมแถวอย่างเท่าเทียมกัน

รูปแบบ Responsive ของ Grid: การซ้อน

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

ข้อผิดพลาดทั่วไปและวิธีหลีกเลี่ยง

• ใช้ Grid สำหรับ Layout แถวเดี่ยว: หากต้องการเพียงรายการในหนึ่งแถวหรือคอลัมน์ Flexbox ง่ายกว่าและเหมาะสมกว่า การใช้ display: grid กับ grid-template-columns แถวเดียวมักเป็นการทำเกินจำเป็น
• ใช้ Flexbox สำหรับ Layout สองมิติ: การพยายามสร้างเค้าโครงกริดด้วยคอนเทนเนอร์ flex ซ้อนกันนำไปสู่โค้ดที่เปราะบางและบำรุงรักษายาก สำหรับ Layout ใดๆ ที่ต้องการควบคุมทั้งแถวและคอลัมน์พร้อมกัน ใช้ Grid
• ลืม gap: ทั้ง Flexbox และ Grid รองรับคุณสมบัติ gap ใช้มันแทน margin สำหรับระยะห่างระหว่างรายการ มันใช้เฉพาะระหว่างรายการ ไม่ใช่ที่ขอบ ซึ่งมักจะเป็นสิ่งที่คุณต้องการ
• เขียนทับ flex-basis ด้วย width: ใน Flex Container flex-basis มีความสำคัญกว่า width บนแกนหลัก การตั้งค่าทั้งสองอาจทำให้เกิดพฤติกรรมที่ไม่คาดคิด ใช้ flex shorthand เพื่อหลีกเลี่ยงความสับสน
• ไม่ใช้ minmax: เมื่อกำหนดคอลัมน์กริด ควรพิจารณาใช้ minmax() เพื่อป้องกันไม่ให้คอลัมน์เล็กหรือใหญ่เกินไป คอลัมน์ที่กำหนดเป็น 1fr สามารถหดเหลือศูนย์ minmax(200px, 1fr) รับประกันความกว้างขั้นต่ำ
• ละเลย Implicit Grid: เมื่อคุณมีรายการมากกว่าแทร็กกริดที่กำหนด Grid จะสร้างแทร็กโดยนัย ใช้ grid-auto-rows และ grid-auto-columns เพื่อควบคุมขนาดของแทร็กโดยนัยเหล่านี้

การสนับสนุนของเบราว์เซอร์

Flexbox และ Grid ทั้งคู่มีการสนับสนุนเบราว์เซอร์ที่ยอดเยี่ยมในปี 2026:

ทั้งสองเทคโนโลยีนี้ได้รับการสนับสนุนอย่างเต็มรูปแบบในทุกเบราว์เซอร์หลักมาหลายปีแล้ว ไม่มีเหตุผลที่จะหลีกเลี่ยงเทคโนโลยีใดเนื่องจากปัญหาความเข้ากันได้ในการพัฒนาเว็บสมัยใหม่ คุณสมบัติ gap ใน Flexbox เป็นคุณสมบัติหลักสุดท้ายที่ได้รับการสนับสนุนสากล ซึ่งพร้อมใช้งานในทุกเบราว์เซอร์ตั้งแต่ปี 2021

คู่มือการตัดสินใจอย่างรวดเร็ว

เมื่อคุณเริ่ม Layout ใหม่ ให้ถามตัวเองด้วยคำถามเหล่านี้:

• ฉันต้องควบคุมทั้งแถวและคอลัมน์หรือไม่? ใช่ — Grid. ไม่ — Flexbox.
• เนื้อหาควรกำหนดขนาด Layout หรือ Layout ควรกำหนดตำแหน่งเนื้อหา? เนื้อหาขับเคลื่อน — Flexbox. Layout ขับเคลื่อน — Grid.
• รายการต้องตัดบรรทัดตามธรรมชาติหรือไม่? ใช่ — Flexbox พร้อม flex-wrap หรือ Grid พร้อม auto-fill.
• ฉันต้องการให้รายการซ้อนทับกันหรือไม่? ใช่ — Grid.
• นี่เป็นคอมโพเนนต์ใน Layout ที่ใหญ่กว่าหรือไม่? คอมโพเนนต์อาจใช้ Flexbox, Layout ใหญ่กว่าใช้ Grid.