Frontend Academy · บทเรียน

การใช้ Flexbox และ Grid ร่วมกัน

ใช้ Grid สำหรับโครงร่างหน้าหลัก และใช้ Flexbox สำหรับการจัดแนวภายในคอมโพเนนต์ โดยเรียนรู้ว่าเมื่อใดควรเลือกใช้เครื่องมือแต่ละแบบ

การใช้ Flexbox และ Grid ร่วมกัน เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

เครื่องมือที่เสริมกัน

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

จัดวางหน้าด้วยกริด จัดคอมโพเนนต์ด้วยเฟล็กซ์

กำหนดโครงร่างระดับสูงของหน้าด้วยกริด ภายในแต่ละพื้นที่กริด ให้ใช้เฟล็กซ์บ็อกซ์สำหรับการจัดวางระดับคอมโพเนนต์ เช่น ลิงก์นำทางในแถวและเนื้อหาการ์ดในคอลัมน์

/* Page skeleton */
body {
  display: grid;
  grid-template-areas: 'header' 'main' 'footer';
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Component inside grid area */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

รูปแบบกริดการ์ด

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

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
}
.card-body { flex: 1; }  /* push footer down */

รูปแบบแถบนำทาง

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

รูปแบบจอกศักดิ์สิทธิ์

รูปแบบ “จอกศักดิ์สิทธิ์” (ส่วนหัว เนื้อหาตรงกลางสามคอลัมน์ และส่วนท้าย) สามารถสร้างได้ง่ายด้วยกริดในปัจจุบัน ทั้งสามคอลัมน์ ได้แก่ แถบด้านข้างซ้าย เนื้อหาหลัก และแถบด้านข้างขวา เป็นคอลัมน์ของกริด ส่วนเนื้อหาภายในแต่ละคอลัมน์ใช้เฟล็กซ์บ็อกซ์

.page {
  display: grid;
  grid-template:
    'header header header' auto
    'left   main   right'  1fr
    'footer footer footer' auto
    / 200px 1fr 200px;
  min-height: 100vh;
}

จัดกึ่งกลางทุกสิ่ง — กริดหรือเฟล็กซ์

ทั้งกริดและเฟล็กซ์บ็อกซ์สามารถจัดเนื้อหาให้อยู่กึ่งกลางได้อย่างสมบูรณ์ กริด: place-items: center (รูปแบบย่อของ align-items + justify-items) เฟล็กซ์: justify-content: center; align-items: center

.center-grid {
  display: grid;
  place-items: center; /* centers both axes */
  min-height: 100vh;
}

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

รูปแบบการจัดวางแถบด้านข้างแบบตอบสนอง

อุปกรณ์เคลื่อนที่: คอลัมน์เดียว (แถบนำทางอยู่ด้านบน) แท็บเล็ตขึ้นไป: แถบด้านข้างและเนื้อหาอยู่ข้างกัน กริดทำให้กำหนดรูปแบบนี้ได้อย่างชัดเจน เพียงเปลี่ยน template-areas ในมีเดียคิวรี

รูปแบบไอคอน + ข้อความ

นี่เป็นรูปแบบการจัดวางย่อยที่พบได้บ่อยมาก นั่นคือไอคอนอยู่ข้างข้อความ เฟล็กซ์บ็อกซ์เหมาะอย่างยิ่ง เพราะเป็นแถวเดียวที่มีการจัดแนว

.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.alert-icon { flex-shrink: 0; width: 20px; }
.alert-body { flex: 1; }

ควรเลือกใช้แบบใด

เลือกกริดเมื่อคุณคิดเป็นทั้งแถวและคอลัมน์ เมื่อต้องการให้รายการจัดแนวตรงกันตามแทร็ก หรือเมื่อกำลังสร้างโครงร่างหน้า เลือกเฟล็กซ์เมื่อคุณคิดในทิศทางเดียว เมื่อต้องการให้รายการหดและขยาย หรือเมื่อกำลังจัดแถวของปุ่มหรือกองรายการ

อย่าออกแบบซับซ้อนเกินจำเป็น

บางครั้งองค์ประกอบแบบบล็อกธรรมดาที่มี max-width และ margin: auto ก็เหมาะกว่ากริดที่ซับซ้อน ไม่ใช่ทุกรูปแบบการจัดวางจำเป็นต้องใช้กริด เลือกเครื่องมือที่เรียบง่ายที่สุดและทำงานนั้นได้

การแก้ไขปัญหาการจัดวาง

ใน DevTools ให้คลิกป้ายกริดหรือเฟล็กซ์ในแผง Elements เพื่อแสดงเส้นกริดหรือเส้นกรอบของรายการแบบยืดหยุ่นซ้อนทับบนหน้า วิธีนี้ทำให้โครงสร้างการจัดวางที่มองไม่เห็นปรากฏขึ้น และมีประโยชน์อย่างมากในการวินิจฉัยการจัดแนวที่ไม่ตรงกัน

ตรวจสอบอย่างรวดเร็ว

การผสมผสานเครื่องมือจัดวางแบบใดที่ใช้กันมากที่สุดสำหรับการจัดวางระดับหน้าและระดับคอมโพเนนต์ตามลำดับ

ทบทวน: การผสานกริดและเฟล็กซ์

กริดและเฟล็กซ์บ็อกซ์เป็นเครื่องมือที่เสริมกัน ใช้กริดสำหรับโครงสร้างหน้าสองมิติ ใช้เฟล็กซ์บ็อกซ์สำหรับองค์ประกอบภายในคอมโพเนนต์แบบมิติเดียว การกำหนด place-items: center ให้กริดจะจัดทุกอย่างไว้ตรงกลาง ส่วน flex-direction: column + flex: 1 ในเนื้อหาการ์ดจะดันส่วนท้ายของการ์ดลงด้านล่าง แก้ไขปัญหาด้วยป้ายโอเวอร์เลย์ใน DevTools

คำถามที่พบบ่อย

บทเรียน “การใช้ Flexbox และ Grid ร่วมกัน” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การใช้ Flexbox และ Grid ร่วมกัน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การใช้ Flexbox และ Grid ร่วมกัน”

ใช้ Grid สำหรับโครงร่างหน้าหลัก และใช้ Flexbox สำหรับการจัดแนวภายในคอมโพเนนต์ โดยเรียนรู้ว่าเมื่อใดควรเลือกใช้เครื่องมือแต่ละแบบ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การใช้ Flexbox และ Grid ร่วมกัน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

เจาะลึก Flexbox: การจัดแนว การตัดบรรทัด และลำดับ
CSS Grid: template-areas, auto-fit และ minmax
การใช้ Flexbox และ Grid ร่วมกัน
ตัวแปร CSS สำหรับการกำหนดธีม

← กลับไปที่ Frontend Academy