ระบุแกนก่อนเลือกคุณสมบัติ CSS
อ่านแผ่นลิลลี่เป้าหมายของระดับและตรวจสอบการจัดเรียงกบในปัจจุบัน ในทิศทางของแถวเริ่มต้น justify-content ทำงานบนแกนหลักแนวนอนและ align-items ทำงานบนแกนไขว้แนวตั้ง ก่อนที่จะพิมพ์ค่า ให้ระบุแกนที่คุณต้องการเปลี่ยน นิสัยนี้ป้องกันข้อผิดพลาดทั่วไป: การเลือกมูลค่าที่เหมาะสมให้กับทรัพย์สินที่ควบคุมทิศทางอื่น
เมื่อ flex-direction เปลี่ยนเป็นคอลัมน์ แกนหลักและแกนขวางจะเปลี่ยนตามไปด้วย ประเมินคุณสมบัติใหม่แทนที่จะสมมติว่า justify-content หมายถึงการเคลื่อนไหวในแนวนอนเสมอ ป้อนการเปลี่ยนแปลง CSS หนึ่งรายการในตัวแก้ไข และเปรียบเทียบตำแหน่งผลลัพธ์กับเป้าหมาย กบอยู่ในตำแหน่ง CSS ของคุณ โดยไม่ถูกลากเข้าที่ ใช้คำแนะนำของระดับและคุณสมบัติที่อนุญาตเพื่อให้การทดสอบเชื่อมโยงกับงานที่แสดงจริง
อธิบายการเปลี่ยนแปลงที่ไม่สำเร็จก่อนลองอีกครั้ง
หลังจากการเปลี่ยนแปลงพลาดเป้าหมาย ให้ถามว่าคุณสมบัติส่งผลต่อแกนที่ไม่ถูกต้อง ค่าที่เลือกจัดเรียงรายการแตกต่างจากที่คุณคาดหวัง หรือทิศทางปัจจุบันเปลี่ยนความหมายของเค้าโครง เก็บส่วนของกฎที่คุณเข้าใจและแก้ไขสิ่งหนึ่ง การเปลี่ยนคุณสมบัติหลายรายการพร้อมกันสามารถเข้าถึงเป้าหมายได้ ทำให้คุณไม่แน่ใจว่าการเปลี่ยนแปลงใดช่วยแก้ปัญหาได้
สำหรับแบบฝึกหัดทบทวน ให้อธิบายกฎที่ประสบความสำเร็จเป็นคำพูดก่อนที่จะดำเนินการต่อ: แกนที่ใช้และวิธีวางตำแหน่งกบเทียบกับแผ่นลิลลี่ ระดับต่อๆ ไปสามารถรวมแนวคิดต่างๆ ได้ ดังนั้นคำอธิบายนี้จึงมีประโยชน์มากกว่าการท่องจำบรรทัดโดยไม่มีบริบท คู่มือนี้ไม่ได้จัดทำรายการคำตอบที่สมบูรณ์หรืออ้างว่าการแก้ปัญหาเกมเป็นการรับรองทักษะระดับมืออาชีพ CSS หน้าการเล่นที่เชื่อมโยงจะให้การควบคุมตัวแก้ไขและการกำหนดกรอบงานที่แน่นอน ศูนย์สนับสนุนความเข้าใจและการปฏิบัติในระดับที่คุณเผชิญจริง
ตัวอย่างเช่น หากกฎเปลี่ยนกบในแนวตั้งเมื่อคุณตั้งใจจะเคลื่อนที่ในแนวนอน ให้ตรวจสอบ flex-direction และระบุแกนหลักปัจจุบันก่อนที่จะเลือกค่าอื่น พูดออกเสียงความสัมพันธ์: คุณสมบัตินี้จะเปลี่ยนการกระจายไปตามแกนหลัก และแกนหลักจะวิ่งไปในทิศทางนี้ จากนั้นทำการแก้ไขและตรวจสอบผลลัพธ์ เมื่อได้ผลแล้ว ให้ทดสอบคำอธิบายของคุณกับแผ่นดอกลิลลี่ที่มองเห็นได้ ซึ่งจะเปลี่ยนการเดาที่ล้มเหลวให้เป็นแนวคิดเค้าโครงที่นำมาใช้ใหม่ได้ แทนที่จะเป็นคำสั่งที่คุณจำได้บนหน้าจอเดียวเท่านั้น
เคล็ดลับและกลยุทธ์สำหรับ Flexbox Froggy
เลือกเคล็ดลับที่อยากฝึกในรอบถัดไป รายการนี้ไม่เปลี่ยนแปลงเกมหรือบันทึกความคืบหน้าในการเล่น
คำถามและคำตอบเกี่ยวกับ Flexbox Froggy
ฉันจำเป็นต้องติดตั้งเครื่องมือเขียนโค้ดหรือไม่?
ไม่ครับ ตัวแก้ไข CSS อยู่ภายในเกมบนเว็บเบราว์เซอร์ครับ
นี่เป็นหลักสูตรการพัฒนาเว็บไซต์ที่สมบูรณ์แบบหรือไม่?
นี่คือเกมฝึกฝนแบบโต้ตอบสำหรับแนวคิดการจัดวางเลย์เอาต์แบบเฟล็กซ์บ็อกซ์ เกมนี้ไม่ได้ใช้แทนหลักสูตร HTML และ CSS ที่ครอบคลุมกว่านี้
ใครเป็นผู้สร้างโปรเจ็กต์นี้?
Thomas Park เป็นผู้สร้าง Flexbox Froggy ซอร์สโค้ดได้รับอนุญาตภายใต้ MIT และภาพประกอบที่บันทึกไว้ใช้ CC BY 3.0 ลิงก์อ้างอิงอยู่ด้านล่าง
ทำไม flex-end ย้ายไปอีกฝั่งเมื่อกลับทิศทาง?
จุดเริ่มและจุดสิ้นสุดตามแกนหลัก ไม่ใช่ขอบซ้ายขวาคงที่ เมื่อใช้ row-reverse แกนเริ่มทางขวา ดังนั้น justify-content: flex-end จะจัดไปทางซ้าย ตรวจ flex-direction ก่อน ส่วน align-items ปรับแกนขวางจึงแก้ปัญหาตำแหน่งอีกแบบ