- CSS Flexbox Playground เป็นเครื่องมือเรียนรู้สำหรับปรับ คุณสมบัติของ Flexbox แบบเรียลไทม์และดูการเปลี่ยนแปลงของเลย์เอาต์
- เมื่อปรับคอนโทรล จะสามารถเปรียบเทียบได้ทันทีว่า การตั้งค่า flex ส่งผลต่อการจัดวางบนหน้าจออย่างไร
- ตัวอย่างพื้นฐานเริ่มต้นด้วยชุดค่าผสม
display: flex, flex-direction: row, justify-content: space-around, align-items: flex-start, flex-wrap: nowrap
- รายการตั้งแต่
1 ถึง 5 บนหน้าจอจะขยับตามการเปลี่ยนแปลงของการตั้งค่า ทำให้เห็น ผลลัพธ์ของเลย์เอาต์ ได้ง่ายด้วยตา
- สามารถคัดลอก โค้ด CSS ที่สร้างขึ้นได้ จึงเหมาะสำหรับนำการตั้งค่าที่ทดลองไปใช้ในโค้ดจริง
เครื่องมือทดลอง Flexbox แบบเรียลไทม์
- CSS Flexbox Playground เป็นเครื่องมืออินเทอร์แอคทีฟสำหรับเรียนรู้และทดลอง คุณสมบัติของ Flexbox
- เมื่อปรับคอนโทรล การเปลี่ยนแปลงของเลย์เอาต์จะสะท้อนผลแบบ เรียลไทม์
- สามารถคัดลอกโค้ด CSS ที่สร้างจากผลการทดลองได้
การตั้งค่าตัวอย่างพื้นฐาน
- การตั้งค่าตัวอย่างของ
.container ใช้ CSS ต่อไปนี้
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-start;
flex-wrap: nowrap;
}
- บนหน้าจอจะแสดงรายการ
1, 2, 3, 4, 5 เพื่อให้ตรวจสอบผลลัพธ์การจัดวางของ Flexbox ได้
1 ความคิดเห็น
ความคิดเห็นจาก Hacker News
ตัว Flexbox เองนั้นเรียบง่ายและสมเหตุสมผล แต่ชื่อพร็อพเพอร์ตีและค่าต่าง ๆ ถูกตั้งแบบคณะกรรมการ ทำให้ไม่ค่อยเป็นธรรมชาติ
พยายามจำว่า
justify-contentกับalign-itemsอันไหนคืออะไร สุดท้ายก็ยอมแพ้ แล้วลองเปลี่ยนไปเรื่อย ๆ จนกว่าจะได้ผลมีคู่มือคล้าย ๆ กันสำหรับ Grid ด้วย และอันนั้นก็ยอดเยี่ยมเช่นกัน
สำคัญเป็นพิเศษใน SPA เมื่อต้องให้กล่องต่าง ๆ เติมเต็มหน้าจอแต่ไม่ล้นออกไป สุดท้ายก็ต้องใส่ค่าที่ไม่เป็นธรรมชาติเลยอย่าง
min-width: 0ไว้หลายจุด แล้วปรับอย่างอื่นอีกนิดหน่อย ก็พอจะออกมาใช้ได้เหมือนน่าจะสร้าง CSS class สักไม่กี่ตัวที่ครอบคลุมเรื่องทั้งหมดนี้ได้ แต่ยังหาวิธีที่ใช้ได้กับทุกกรณีไม่ได้
display: flexจะเห็นพร็อพเพอร์ตี Flexbox หลายอย่างถูก แสดงเป็นไอคอนให้เห็นภาพ และคลิกเพื่อตั้งค่าได้ทันทีแทบจะทำให้ทุกหน้าเว็บกลายเป็นสนามทดลองได้เลย
justify-content: centerคือjustify-centerส่วนalign-items: centerคือitems-centerไม่รู้ว่าทำไมถึงทำแบบนี้justify-contentควรถูกเรียกว่าmain-axisและalign-itemsควรถูกเรียกว่าcross-axisถ้าเข้าใจตรงนี้ Flexbox ทั้งหมดก็จะง่ายขึ้น
ถึงจะมีคนพูดถึงกันเยอะแล้ว แต่ขอแนะนำ Flexbox Froggy https://flexboxfroggy.com/ และคนอื่น ๆ ก็เรียนรู้ได้เร็วเช่นกัน
ถ้าจะเรียน CSS Grid, https://cssgridgarden.com/ ก็เยี่ยมเหมือนกัน
คล้ายกับ https://www.codemonkey.com/ ที่ค่อนข้างเหมาะกับเด็ก ๆ
เวลาสร้างโค้ด Bootstrap, https://build.layoutit.com/ มีประโยชน์ และสำหรับ CSS Grid ก็มี https://grid.layoutit.com/ แต่เสียดายที่ตัวแรกซัพพอร์ตถึงแค่ Bootstrap 4 ไม่ใช่ Bootstrap 5
ขอแนะนำไกด์ของ Josh อย่างยิ่ง https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
อธิบายกับดักและเคล็ดลับขั้นสูงอย่าง
flex-basis, margin อัตโนมัติ,min-widthไว้อย่างละเอียดคิดว่าตัวเองรู้จัก Flexbox และ คอมโพเนนต์ของ Tailwind CSS ค่อนข้างดีแล้ว แต่บทความนี้ช่วยตอบโจทย์ความอยากเข้าใจพื้นฐานเชิงทฤษฎีได้ดีมาก
เป็น playground ที่ดี
เมื่อหลายปีก่อนเคยทำไกด์แบบ interactive ที่ใส่ playground คล้าย ๆ กันไว้ช่วงท้าย: https://lik.ai/guides/an-interactive-guide-to-flexbox/
มีประโยชน์เวลาต้องรื้อฟื้นความจำเป็นครั้งคราว
ตอนนี้ก็ปี 2025 แล้ว ผ่านมา 2 ปีและ tutorial อีก 3 อัน แต่ก็ยังใช้ Flexbox ได้ไม่คล่องอยู่ดี
https://flexboxfroggy.com/ ก็ไม่ได้ช่วยอะไรมาก
justifyกับalignมักจะสลับกันเสมอในการลองครั้งแรกเรื่องสารพัดอย่างรวมถึงเลย์เอาต์แบบ CSS float ยังจำได้เป็นปี ๆ แต่ถ้าไม่ได้ใช้ Flexbox ไม่กี่เดือน ก็ลืมไป 80% แล้วต้องกลับไปอ่านใหม่ตั้งแต่ต้นและเสียเวลาใน playground อีก
ปัญหาคือชื่อพร็อพเพอร์ตีมีมากเกินไป และหลายชื่อไม่เป็นธรรมชาติ หรือรู้สึกเหมือนตั้งชื่อผิดไปเลย ต่อให้ตั้งเป็นชื่อสัญลักษณ์สั้น ๆ หนึ่งหรือสองตัวอักษรก็คงพอ ๆ กัน
หวังว่าเครื่องมือนี้จะช่วยได้ และถ้ามีอะไรที่ขาดไปก็อยากให้บอก
ทำไมถึงตั้งชื่อพร็อพเพอร์ตีนี้ว่า
justify-content,align-itemsกันนะmain-axis-arrangementกับcross-axis-alignmentน่าจะสมเหตุสมผลกว่าไม่ใช่หรืออย่าง
color,text-align,position: absoluteกับposition: fixedก็เช่นกัน และabsoluteเองในเชิงเทคนิคก็ยังเป็นแบบสัมพันธ์อยู่ดีjustify-items,justify-selfจึงมีความสม่ำเสมออยู่แต่ก็ยังสับสนกับ
align-contentอยู่ดีgrid-templateที่ เขียนแกน y ก่อน ก็ชวนสับสน:y1 / x1 / y2 / x2แถมยังไม่ได้เริ่มจาก 0 อีก เลยลืมทุกที
ปลั๊กอิน alias สำหรับ Tailwind ที่แมป
cross-axis-centerไปเป็นalign-items: centerและmain-axis-betweenไปเป็นjustify-content: space-betweenอะไรแบบนี้ น่าจะทำได้เร็วมากแน่นอนว่ามันเปลี่ยนได้ แต่พฤติกรรมเริ่มต้นของ Flexbox ใช้วิธีจำนี้ครอบคลุมได้
ตอนเรียน Flexbox ผมทำชีตสรุปไว้เพื่อเปิดดูพร็อพเพอร์ตี
น่าจะเป็นประโยชน์กับคนอื่นด้วย: https://darekkay.com/flexbox-cheatsheet/
ถ้าเป็นชีตสรุปแบบภาพสำหรับดูเร็ว ๆ ก็ถือว่าดี แต่สุดท้ายผมคิดว่าต้องลองใช้ตามจุดต่าง ๆ ในโปรเจกต์จริง ถึงจะจำขึ้นมือ
ไวยากรณ์ส่วนใหญ่ค่อนข้างอธิบายตัวเองได้ ยกเว้น
rowกับcolumnผมไม่เคยติดขัดกับ Flexbox หรือ Grid ส่วนใหญ่มากนัก แต่เห็นได้ว่าหลายคนสับสนกันเยอะ การเข้าใจ box model และใช้ เครื่องมือนักพัฒนาของ Firefox ช่วยได้มากตอนเรียนรู้โมเดล Flexbox มันแสดงภาพคอนเทนเนอร์ได้ค่อนข้างดี และตอนนี้เครื่องมือนักพัฒนาของ Chrome ก็ดูเหมือนจะทำได้คล้ายกันแล้ว
flexboxfroggy กับ cssgridgarden ก็มีประโยชน์สำหรับฝึกเหมือนกัน ถึงอย่างนั้นเวลาจะดูไวยากรณ์ ผมก็ยังเปิดชีตสรุปของ CSS-Tricks ทุกครั้ง และไม่มีทางเดาถูกตั้งแต่ครั้งแรกว่าเป็น
rowหรือcolumnสามารถสลับ โหมด Flex ได้อย่างรวดเร็ว https://imgur.com/a/17iy1eN
เครื่องมือนี้ดูจำกัดเกินไป เพราะครอบคลุมแค่พร็อพเพอร์ตีของคอนเทนเนอร์ 4 รายการ
พร็อพเพอร์ตีของรายการลูก ซึ่งค่อนข้างสำคัญใน Flexbox ถูกละไว้ทั้งหมด
ถ้ามีชุดโจทย์ที่น่าสนใจสำหรับฝึกเลย์เอาต์ CSS ก็คงดี
อยากให้มีคำเฉลยและคำอธิบายที่เขียนดี ๆ รวมถึง โจทย์ดีบัก แบบ “ทำไมโค้ดชิ้นนี้ถึงสร้างเลย์เอาต์ที่ต้องการไม่ได้” ด้วย
ChatGPT ช่วยได้ค่อนข้างมากในการดีบักปัญหา CSS แม้จะไม่ได้ถูกเสมอไป แต่โดยรวมช่วยชี้ทิศทางที่ถูกต้องได้ ถึงอย่างนั้นผมก็ยังอยากเข้าใจให้ลึกขึ้นว่า CSS ทำงานจริง ๆ อย่างไร ผมอ่านหนังสือกับบทเรียนมาบ้าง และเข้าใจว่าท้ายที่สุดมันคือชุดของกฎ แต่การนำไปใช้อย่างแม่นยำยังยากอยู่
มักจะถามให้ช่วยแก้ CSS แล้วเขียนใหม่ให้ได้หน้าตาตามที่ต้องการ ซึ่งเร็วกว่าการคุ้ยเอกสารมาก