Flexbox Froggy
(flexboxfroggy.com)- เป็น เกมเรียนรู้แบบอินเทอร์แอคทีฟ ที่ให้พิมพ์ CSS flexbox เองเพื่อส่งกบไปยังใบบัว และสามารถเห็นผลของคุณสมบัติการจัดวางได้ทันทีบนหน้าจอ
- เลเวลแรกเป็นการเปลี่ยน การจัดวางแนวนอน ด้วย
justify-contentในสถานะที่#pondถูกตั้งค่าdisplay: flex;ไว้แล้ว justify-contentใช้ปรับการจัดวางรายการภายในคอนเทนเนอร์ด้วยค่าต่าง ๆ เช่นflex-start,flex-end,center,space-between,space-around- ตัวอย่างเช่น เมื่อใส่
justify-content: flex-end;กบจะย้ายไปยังใบบัวด้านขวา ทำให้เห็นความเชื่อมโยงระหว่างคุณสมบัติกับผลลัพธ์ได้ - ทั้งหมดประกอบด้วย 24 เลเวล และรองรับหลายภาษา รวมถึงภาษาเกาหลี ตลอดจนโหมดปรับแก้การมองเห็นสี
วิธีเรียน CSS flexbox ผ่านเกม
- Flexbox Froggy เป็นเกมสำหรับเรียน CSS flexbox โดยพา Froggy และเพื่อน ๆ ไปยังตำแหน่งเป้าหมาย
- เมื่อเขียนคุณสมบัติในพื้นที่แก้ไขโค้ด CSS ของ
#pondบนหน้าจอ ตำแหน่งของกบจะเปลี่ยนไป - เลเวลแรกเป็นโจทย์ที่ใช้
justify-contentเพื่อส่งกบไปยังใบบัวด้านขวา - โค้ดพื้นฐานจะแสดงโครงสร้างดังนี้
#pond {display: flex;}
เรียนรู้การจัดวางแนวนอนด้วย justify-content
justify-contentเป็นคุณสมบัติสำหรับจัดเรียงรายการใน ทิศทางแนวนอน- ค่าที่ใช้ได้มีดังนี้
flex-start: จัดรายการชิดซ้ายของคอนเทนเนอร์flex-end: จัดรายการชิดขวาของคอนเทนเนอร์center: จัดรายการไว้กึ่งกลางคอนเทนเนอร์space-between: เว้นระยะห่างเท่ากันระหว่างรายการspace-around: เว้นระยะห่างเท่ากันรอบรายการ
- เมื่อเขียน
justify-content: flex-end;กบจะย้ายไปทางขวา ทำให้เปรียบเทียบ ค่าคุณสมบัติกับผลการจัดวาง ได้ทันที
โครงสร้างและสื่อการเรียนรู้ที่เกี่ยวข้อง
- เกมแสดงเป็น Level 1 of 24 และในการตั้งค่าภาษามีหลายภาษา รวมถึงภาษาเกาหลี
- เกมที่เกี่ยวข้องสำหรับเรียน CSS เพิ่มเติมมีลิงก์ไปยัง Grid Garden และ Anchoreum
1 ความคิดเห็น
ความคิดเห็นบน Hacker News
ยังมี สื่อการเรียนรู้แบบเกม อื่น ๆ ที่เหมาะสำหรับการเรียน CSS ด้วย
https://cssgridgarden.com/ — คล้าย Froggy สำหรับ Grid
https://cssbattle.dev/ — เป็นแพลตฟอร์มสำหรับแก้โจทย์ท้าทายหลากหลาย และมีชุมชนใหญ่
https://flukeout.github.io/ — เรียนรู้ CSS selector
https://css-animations.io/ — ฝึก CSS animation
https://css-tricks.com/understanding-flex-grow-flex-shrink-a... — อธิบาย flex-grow, flex-shrink, flex-basis
แม้จะใช้ CSS มาหลายปีแล้ว พร็อพเพอร์ตีเกี่ยวกับ flex อย่าง align-content กับ align-items ก็ยังสับสนทุกครั้ง
ให้ความรู้สึกเหมือนเสียบสาย USB กลับด้านอยู่ตลอด และ align กับ justify ก็เหมือนกัน
CSS Grid ก็ยอดเยี่ยมจริง ๆ ตอนนี้มีตัวเลือกเลย์เอาต์ดี ๆ มากจนเรียกได้ว่าเราอยู่กันอย่างสบายทีเดียว
ผมพิมพ์ตารางสรุปของทั้งสองอันออกมาวางไว้บนโต๊ะด้วย เป็นแหล่งข้อมูลที่มีค่าจริง ๆ
[0] https://css-tricks.com/snippets/css/a-guide-to-flexbox/
[1] https://css-tricks.com/snippets/css/complete-guide-grid/
justify-สอดคล้องกับ แกนหลัก,align-สอดคล้องกับแกนไขว้-contentใช้กับแทร็กของ grid หรือแถวของคอนเทนเนอร์flex-wrapส่วน-itemsใช้กับลูกแต่ละตัว หรือก็คือรายการในแถวหรือเซลล์ gridถึงอย่างนั้น ถ้าชื่อชัดกว่านี้ก็คงดี
flex-directionโดยรวม เลยกลายเป็นโครงสร้างที่พร็อพเพอร์ตีอย่างflex-alignเปลี่ยนไปตาม ทิศทาง ของพาเรนต์ในทางปฏิบัติ แทบไม่มีกรณีที่เปลี่ยนทิศทางแล้วได้ประโยชน์มากจริง ๆ
ผมไม่รู้ว่านั่นเป็นเหตุผลเดียวหรือเปล่า เลยจะไม่ฟันธงว่าเป็นการเลือกที่แย่ แต่ผมเองก็จำไม่ได้เหมือนกันว่าอันไหนคืออันไหน
ถ้ามีชื่อที่แสดงแกนออกมาโดยตรงกว่านี้ หรือพร็อพเพอร์ตีไม่ขึ้นกับทิศทางของพาเรนต์ก็คงดี แต่ก่อนจะถึงตอนนั้นก็ต้องใช้ชีตสรุปกันไปก่อน
แต่ก็ไม่ค่อยมีเรื่องให้ต้องใส่ใจบ่อยนัก เลยอาจเป็นเหตุผลที่ยิ่งจำไม่ค่อยได้ด้วย
ผมได้เรียนรู้อะไรมากมายจริง ๆ จากเกมแบบนี้ Vim ก็เรียนจาก https://vim-adventures.com/ และตอนนี้แทบจะอยู่ไม่ได้ถ้าไม่มี Vim
โพสต์ HN ก่อนหน้า:
https://news.ycombinator.com/item?id=30251054 ปี 2022, 317 คะแนน, 31 ความคิดเห็น
https://news.ycombinator.com/item?id=22629903 ปี 2020, 27 คะแนน, 2 ความคิดเห็น
https://news.ycombinator.com/item?id=21796926 ปี 2019, 2 คะแนน, 0 ความคิดเห็น
https://news.ycombinator.com/item?id=18752031 ปี 2018, 3 คะแนน, 0 ความคิดเห็น
https://news.ycombinator.com/item?id=18731852 ปี 2018, 6 คะแนน, 1 ความคิดเห็น
https://news.ycombinator.com/item?id=15605783 ปี 2017, 4 คะแนน, 0 ความคิดเห็น
https://news.ycombinator.com/item?id=14349739 ปี 2017, 3 คะแนน, 0 ความคิดเห็น
https://news.ycombinator.com/item?id=10652909 ปี 2015, 315 คะแนน, 69 ความคิดเห็น
ยอดเยี่ยมเลย ตอนที่เรียน flexbox เมื่อก่อนก็ใช้ตัวนี้
ยังมี https://codepip.com/games/grid-garden/ ที่ทำโดยผู้สร้างคนเดียวกันด้วย และช่วยให้เรียน CSS Grid ด้วยแนวทางเดียวกัน
น่าจะเป็นเพราะมันสร้างเส้นทางการเรียนรู้ที่เป็นธรรมชาติมาก โดยค่อย ๆ ทำโจทย์ที่ดูง่ายจากสิ่งที่เรียนไปแล้วให้ยากขึ้นเรื่อย ๆ
เมื่อก่อนเคยเล่นเกมนี้อย่างสนุกเพื่อเรียน CSS selectors: https://flukeout.github.io/
Guess CSS ก็มี ส่วน Flexbox เหมือนกัน แต่เน้นไปที่การอ่านมากกว่าการเขียน CSS: https://www.guess-css.app/
positionนี่ผมต้องไม่เข้าใจอะไรเลยจริง ๆ แน่ ๆข้ออื่น ๆ ยังตอบถูกได้เรื่อย ๆ แต่พอเป็น position ก็ผิดตลอด
มีประโยชน์มาก ผมมักลงเอยด้วยการค้นหาเรื่อง การจัดแนวแนวตั้ง ของ flexbox อยู่เสมอ
ถ้าจะช่วยฟื้นความรู้ flexbox ได้เร็วในเวลาที่รีบ ๆ ก็น่าจะดีถ้ามีฟีเจอร์ให้ลากแล้ววางกบลงบนกริด 3x3 แล้วแสดงโค้ด CSS ของ flexbox ที่ตรงกันออกมา
ถึงอย่างนั้นก็เป็นบทเรียนที่ทำมาอย่างพิถีพิถันมาก
ที่พูดแบบนี้เพราะส่วนตัวผมเลิกพยายามตามฟีเจอร์ CSS ใหม่ ๆ ให้ทันแล้ว ผมใช้ CSS แบบเป็นพัก ๆ มาตั้งแต่ยุค IE7 และหลังจากผ่านยุคที่ต้องเขียน vendor prefix ด้วยมือ กับฟีเจอร์ใหม่ ๆ ที่ Chrome Canary ยัดเข้ามา ก็ไม่มีแรงจะเก็บเทคนิค CSS ไว้ในหัวตลอดเวลาแล้ว
สำหรับ UI ส่วนใหญ่ แค่ flexbox ก็เพียงพอแล้ว และโดยพื้นฐานมันคือเครื่องมือสำหรับจัดวางรายการในแนวตั้ง·แนวนอน เหมือน stack/group หรือ vbox/hbox
เรียน flexbox ก็พอแล้ว มันเป็นสิ่งที่มีประโยชน์ที่สุดและเรียบง่ายจริง ๆ ในบรรดาสิ่งที่เข้ามาใน CSS layout ระยะห่างใช้
gapการจัดวางก็ประมาณ justify กับ align ดังนั้น 99% ก็จบที่ตรงนั้นชอบ Flexbox Froggy มาก พูดได้เลยว่าทั้งนักพัฒนารุ่นหนึ่ง เรียน flexbox จากเว็บนี้ ผมก็เป็นหนึ่งในนั้น
ตอนนั้นผมใช้ CSS มา 15 ปีแล้วด้วยซ้ำ
เป็นเครื่องมือการสอนที่น่าทึ่งมาก
คู่มือแบบอินเทอร์แอ็กทีฟ เรื่อง flexbox ของ Josh Comeau ก็ควรดูเช่นกัน: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox...
ดีเลย ถ้ามีเวอร์ชัน Tailwind ด้วยก็คงดี