Stax
Tools

CSS Flexbox Playground

Experiment with Flexbox properties visually and copy the CSS.

1
2
3
4
5
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

CSS Flexbox Playground — เรียนรู้ Flexbox แบบภาพจริงและสร้าง Layout ได้เร็วขึ้น

CSS Flexbox เป็นเครื่องมือจัดวาง Layout ที่ทรงพลังที่สุดในชุดเครื่องมือของนักพัฒนา front-end ทุกคน แต่หลายคนยังคงต้องค้นหาชื่อ property และค่าต่างๆ ทุกครั้งที่เขียน layout playground แบบโต้ตอบนี้ช่วยให้คุณทดลองกับทุก Flexbox property แบบ real-time — เห็นผลลัพธ์ที่แน่ชัดของแต่ละการผสมผสานก่อนจะเขียนโค้ดใน production แม้แต่บรรทัดเดียว

ปรับ property ของ container ไม่ว่าจะเป็น flex-direction, justify-content, align-items, flex-wrap, align-content หรือ gap ผ่านตัวควบคุมด้านซ้าย แผง preview แบบ live ด้านขวาจะอัปเดตทันที แสดง flex item ที่มีสีสันตอบสนองต่อการเปลี่ยนแปลง property เมื่อได้ layout ที่ต้องการแล้ว คลิก Copy CSS เพื่อรับ declaration ที่พร้อมวางใน stylesheet ของคุณ คุณยังสามารถปรับ property ของแต่ละ item เช่น flex-grow, flex-shrink, flex-basis, order และ align-self แยกกันสำหรับแต่ละ child ได้

การอ่านเอกสาร MDN สำหรับ justify-content บอกคุณว่าแต่ละค่าหมายความว่าอย่างไร แต่การเห็น space-around กับ space-evenly อัปเดตแบบ live ใน preview ที่มี item ห้าชิ้น บอกคุณว่าควรเลือกอันไหนสำหรับ layout เฉพาะของคุณ นักพัฒนาที่เรียนรู้ Flexbox ผ่านภาพจะซึมซับ mental model ได้เร็วกว่า และหยุดลังเลเมื่อสร้าง navbar, card grid และ hero section ที่จัดกึ่งกลาง playground นี้ออกแบบมาสำหรับ learning loop แบบนั้น — ลอง, สังเกต, เข้าใจ, ทำซ้ำ

นักพัฒนาระดับ junior ใช้ระหว่างเรียน Flexbox เป็นครั้งแรก — feedback loop ทันทีแทนที่การลองผิดลองถูกหลายชั่วโมงใน code editor นักพัฒนาที่มีประสบการณ์ใช้เป็น scratchpad รวดเร็วเมื่อเจอ edge case (เช่น sticky footer หรือ sidebar layout ที่ต้องการเติมพื้นที่ที่เหลือ) workflow การแปลง design เป็นโค้ดใช้เพื่อ prototype layout ของ component เฉพาะอย่างรวดเร็วก่อนนำไปใส่ใน component library

playground นี้ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ไม่มีโค้ด CSS, การตั้งค่า layout หรือข้อมูล session ถูกส่งไปยังเซิร์ฟเวอร์ใดๆ คุณสามารถใช้กับโปรเจกต์ภายในที่เป็นกรรมสิทธิ์หรือเบื้องหลัง firewall โดยไม่มีข้อมูลออกจากอุปกรณ์ของคุณ

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

What is CSS Flexbox?
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout method for arranging items in rows or columns. It makes it easy to distribute space and align items in a container, even when their sizes are unknown or dynamic.
What is the difference between justify-content and align-items?
justify-content controls alignment along the main axis (row = horizontal, column = vertical). align-items controls alignment along the cross axis (perpendicular to the main axis). Together they position items both horizontally and vertically.
When should I use flex-wrap: wrap?
Use flex-wrap: wrap when you want items to wrap onto a new line when they don't fit in one row. Without wrapping, items either shrink to fit or overflow the container.
What does align-content do?
align-content distributes space between rows of a multi-line flex container (only applies when flex-wrap is wrap or wrap-reverse and there are multiple lines). It has no effect on single-line containers.
How do I centre an element with Flexbox?
Set display: flex on the parent, then use justify-content: center and align-items: center. This centres the child element both horizontally and vertically inside the parent.

เครื่องมือที่เกี่ยวข้อง