เครื่องมือสร้าง Flexbox ของ CSS

สร้างเลย์เอาต์ CSS ด้วย flexbox แบบเห็นภาพ ดูผลลัพธ์แบบเรียลไทม์ขณะที่คุณปรับทิศทาง การจัดแนว การตัดบรรทัด และระยะห่าง

flex-directionjustify-contentalign-itemsflex-wrap

gap: 8px

display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;

วิธีใช้เครื่องมือนี้

1
Pick values from the four dropdowns: flex-direction, justify-content, align-items, and flex-wrap.
2
Drag the gap slider to set the spacing between items, from 0 to 40 pixels.
3
Watch the live preview of four numbered boxes update instantly to reflect each change.
4
Click 'Copy CSS' to copy the generated declaration block, then paste it onto your own flex container.

เครื่องมือสร้าง Flexbox ของ CSS คืออะไร?

Flexbox เป็นวิธีสมัยใหม่ในการจัดวางองค์ประกอบใน CSS ซึ่งง่ายกว่าการใช้ float หรือการกำหนดตำแหน่งแบบ absolute มาก คุณสมบัติต่างๆ ได้แก่ flex-direction (แถวหรือคอลัมน์), justify-content (การจัดแนวบนแกนหลัก), align-items (แกนขวาง), flex-wrap และ gap เครื่องมือนี้เปิดให้ใช้ทั้งหมดพร้อมตัวอย่างแสดงผลแบบเรียลไทม์

กรณีการใช้งานทั่วไป

Aligning a horizontal navigation bar so links sit at flex-start and a logo or button pushes to flex-end with space-between.
Centering a single element both horizontally and vertically using justify-content: center and align-items: center.
Spacing a row of buttons or tags evenly with a fixed gap instead of fragile margins.
Stacking form fields vertically by switching flex-direction to column while keeping consistent gap spacing.
Letting a row of cards wrap onto new lines on narrow screens with flex-wrap: wrap.
Learning how justify-content and align-items behave by toggling values and watching the live preview before committing the code.

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

Flexbox หรือ Grid?▼

ใช้ flexbox สำหรับเลย์เอาต์แบบมิติเดียว (แถวของปุ่ม แถบนำทาง) ใช้ CSS Grid สำหรับเลย์เอาต์แบบสองมิติ (การ์ดในตารางแบบ responsive)

เครื่องมือสร้าง Flexbox ของ CSS

วิธีใช้เครื่องมือนี้

เครื่องมือสร้าง Flexbox ของ CSS คืออะไร?

กรณีการใช้งานทั่วไป

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

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

เครื่องมือแปลงสี (HEX/RGB/HSL)

เครื่องมือสร้าง Box Shadow CSS

เครื่องมือสร้างไล่ระดับสีของ CSS

เครื่องมือสร้างเส้นโค้งการเร่งความเร็ว Cubic Bezier

เครื่องมือสร้างชุดสี

เครื่องมือสร้าง Border Radius CSS