เรียนรู้ CSS ด้วยเกม: Flexbox Froggy และ Grid Garden

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

วิธีการเรียนรู้ CSS ด้วยเกม แล้วนำไปใช้

เส้นทางนี้ผสมผสานเกมสองเกมเข้ากับแบบฝึกหัดดั้งเดิมสามแบบ เหมาะสำหรับผู้ที่สามารถอ่านกฎ CSS ง่ายๆ และต้องการผลตอบรับที่มองเห็นได้ นี่ไม่ใช่หลักสูตรการพัฒนาเว็บที่สมบูรณ์: อินเทอร์เฟซจริงยังต้องการเนื้อหาที่อ่านได้ พฤติกรรมที่ตอบสนอง การเข้าถึงด้วยแป้นพิมพ์ และการทดสอบด้วยข้อความในปริมาณที่แตกต่างกัน

เลือกแบบฝึกหัดที่เหมาะสมกับคำถามของคุณ

เกมเหล่านี้สร้างโดย Codepip Cozcade เชื่อมโยงเกมแต่ละเกมที่โฮสต์ไว้กับคู่มือที่เกี่ยวข้อง: Flexbox Froggy และ คู่มือของเกมนั้น; Grid Garden และ คู่มือของเกมนั้น หน้าเว็บ Froggy และ Grid Garden ดั้งเดิมมีเวอร์ชันที่ผู้เขียนสร้างขึ้นเอง ใช้แป้นพิมพ์เมื่อทำตามแบบฝึกหัดโค้ดที่นี่

ก่อนอื่น ให้ตั้งชื่อแกนก่อนที่จะเลือกคุณสมบัติ

Flexbox มีแกนหลักและแกนขวาง flex-direction กำหนดทิศทางหลัก; justify-content จัดวางรายการตามแกนหลัก ในขณะที่ align-items เกี่ยวข้องกับแกนขวาง ในแถวปกติจากซ้ายไปขวา แกนหลักจะเป็นแนวนอน เปลี่ยนทิศทางเป็นคอลัมน์ แกนหลักก็จะกลายเป็นแนวตั้ง คำจำกัดความเหล่านี้มีอธิบายไว้ใน บทนำ Flexbox ของ MDN

ก่อนที่จะลองประกาศใน Froggy ให้ระบุทิศทางที่คุณต้องการให้รายการเคลื่อนที่ จากนั้นตั้งชื่อทิศทางนั้นโดยสัมพันธ์กับแกนหลักปัจจุบัน วิธีนี้จะเปลี่ยนคำตอบที่ผิดให้เป็นคำถามเฉพาะเจาะจง: คุณเลือกคุณสมบัติผิด ค่าผิด หรือแกนผิดหรือไม่?

แบบฝึกหัดที่ 1: ย้ายกลุ่มไปที่ท้ายสุด

สร้างรายการขนาดเล็กสามรายการภายในคอนเทนเนอร์ นี่เป็นแบบฝึกหัดดั้งเดิม ไม่ใช่ระดับเกมหรือเฉลยที่คัดลอกมา

<div class="practice-row">
  <span>A</span><span>B</span><span>C</span>
</div>

.practice-row {
  display: flex;
  gap: 0.5rem;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid;
  direction: ltr;
}

เป้าหมายของคุณคือการย้ายสิ่งของทั้งสามชิ้นไปทางด้านขวาพร้อมกัน โดยไม่เปลี่ยนลำดับหรือกำหนดระยะขอบแยกต่างหากให้กับแต่ละชิ้น ทำนายผลลัพธ์ จากนั้นเพิ่ม justify-content: flex-end ลงในคอนเทนเนอร์

ตอนนี้เปรียบเทียบกับ justify-content: space-between ตัวเลือกแรกจะย้ายกลุ่ม ตัวเลือกที่สองจะกระจายพื้นที่ว่างระหว่างสิ่งของ ลองใช้คอนเทนเนอร์แบบแคบและแบบกว้าง อธิบายว่าคุณจะเลือกเวอร์ชันใดสำหรับปุ่มสามปุ่มที่ควรอยู่ใกล้กัน ผลลัพธ์ที่มองเห็นได้มีความสำคัญมากกว่าการจำค่าเพียงค่าเดียว

แบบฝึกหัดที่ 2: คงคำสั่งเดิม เปลี่ยนแกน

นำคอนเทนเนอร์นั้นกลับมาใช้ใหม่ เพิ่ม flex-direction: column ตั้งค่า height: 12rem และคง justify-content: flex-end ไว้ ตอนนี้สิ่งของจะรวมตัวกันไปทางด้านล่าง การประกาศของคุณไม่ได้กลายเป็นคำสั่ง "ย้ายไปทางขวา" มันยังคงทำงานตามแกนหลักที่คุณเปลี่ยนไป

ต่อไป ให้เพิ่ม align-items: flex-start เปรียบเทียบการจัดเรียงก่อนและหลังการเพิ่มนั้น ด้วยทิศทางจากซ้ายไปขวาที่ระบุ รายการต่างๆ จะเรียงตัวไปทางซ้ายบนแกนขวาง ลบการประกาศออกและสังเกตพฤติกรรมการยืดตามค่าเริ่มต้นอีกครั้ง

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

ต่อไป ให้แยกความแตกต่างระหว่างแทร็กตารางกับขอบเขตของมัน

การจัดวางตารางใช้เส้นที่ล้อมรอบแถวและคอลัมน์ คอลัมน์ที่ระบุอย่างชัดเจนห้าคอลัมน์มีเส้นขอบหกเส้น รายการที่วางจากเส้นคอลัมน์ที่ 3 ถึงเส้นที่ 5 จะครอบคลุมสองคอลัมน์ ไม่ใช่สามคอลัมน์ ดู คำแนะนำเกี่ยวกับตารางของ MDN สำหรับความแตกต่างระหว่างแทร็ก เซลล์ และเส้น

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

แบบฝึกหัดที่ 3: วางการ์ดระหว่างสองบรรทัด

สร้างกระดานห้าคอลัมน์และวางการ์ดหนึ่งใบ:

<div class="practice-grid">
  <div class="practice-card">Two-column card</div>
</div>

.practice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, 4rem);
  gap: 0.5rem;
  direction: ltr;
}

.practice-card {
  grid-column: 3 / 5;
  grid-row: 2;
  background: #d9ceff;
  color: #201538;
}

คาดการณ์ตำแหน่งที่การ์ดจะปรากฏก่อนเปิดหน้า จากนั้นทำให้การ์ดครอบคลุมทั้งกระดานโดยการเปลี่ยนตำแหน่งคอลัมน์เท่านั้น ด้วยห้าคอลัมน์ที่กำหนดไว้ข้างต้น grid-column: 1 / 6 จะครอบคลุมตั้งแต่ขอบเขตแรกจนถึงขอบเขตสุดท้าย

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

ใช้ความคืบหน้าของเกมเป็นข้อเสนอแนะ ไม่ใช่หลักฐานของความเชี่ยวชาญ

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

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

ดำเนินการต่อด้วยคู่มือการจับคู่

ใช้ คู่มือ Froggy สำหรับการฝึกฝนแกนและการจัดแนว และ คู่มือ Grid Garden สำหรับคำถามการจัดตำแหน่ง หากคุณต้องการฝึกฝนประเภทอื่นหลังจากนั้น โปรดดู เกมการเรียนรู้

แบบฝึกหัดข้างต้นเขียนขึ้นสำหรับบทความนี้ หน้าอ้างอิงได้รับการตรวจสอบเมื่อวันที่ 11 ตุลาคม 2026 การตรวจสอบการเล่นเกมที่เราบันทึกไว้ครอบคลุมการโต้ตอบบนเดสก์ท็อปจำนวนเล็กน้อย ไม่ใช่การทำทุกระดับให้เสร็จสมบูรณ์หรือหลักสูตรมือถือแบบเต็มรูปแบบ บทความนี้สอนลำดับการฝึกฝน ไม่ได้ให้วุฒิการศึกษาหรือทดแทนการทดสอบอินเทอร์เฟซของคุณเอง

เกมที่คุณสามารถเล่นได้บน Cozcade

Flexbox FroggyGrid Garden