เครื่องกำเนิดเฟล็กซ์บ็อกซ์

ทดลองกับทิศทางการงอ พัน จัดให้ชิดขอบ และจัดแนว ดูการอัปเดตเลย์เอาต์ของรายการแบบเรียลไทม์ จากนั้นคัดลอก CSS ของคอนเทนเนอร์

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

ทดลองใช้ทิศทางแบบยืดหยุ่น ห่อ จัดแนว และจัดแนว — ดูการอัปเดตเค้าโครงแบบเรียลไทม์
ทำงานในเบราว์เซอร์ของคุณ
ใช้งานได้ฟรี

วิธีใช้

กำหนดทิศทางการงอและการพัน
ปรับ justify-content และ align-items
คัดลอก Flexbox CSS

How this tool works

กำหนดทิศทางการงอและการพัน
ปรับ justify-content และ align-items
คัดลอก Flexbox CSS

Recommended settings

ใช้ตัวเลือกเริ่มต้นก่อน จากนั้นจึงปรับเปลี่ยนหากจำเป็น

Supported formats

Text / on-page input

File size and limits

การดูตัวอย่างหลายเลเยอร์ที่ซับซ้อนมากอาจรู้สึกช้าลงในโทรศัพท์รุ่นเก่า

Privacy

ตัวสร้างสีและ CSS ทำงานทั้งหมดในเบราว์เซอร์ของคุณ การดูตัวอย่างและการแปลงไม่เคยอัปโหลดสไตล์ของคุณ

Common use cases

ใช้ Flexbox Generator ทุกครั้งที่คุณต้องการ: ทดลองด้วยทิศทางงอ ห่อ จัดแนว และจัดตำแหน่ง — ดูการอัปเดตเค้าโครงแบบเรียลไทม์

Troubleshooting

การแสดงตัวอย่างดูแตกต่างออกไปหลังจากวาง

ตรวจสอบ CSS ที่แข่งขันกันบนเพจของคุณ (รีเซ็ต, สีที่สืบทอดมา) คัดลอกกฎที่สร้างขึ้นลงในสไตล์ชีตแบบแยกก่อน

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

สิ่งนี้อัปโหลด CSS ของฉันหรือไม่

ไม่ ตัวสร้างและตัวแปลงทำงานในเบราว์เซอร์ของคุณพร้อมการแสดงตัวอย่างแบบสด

ฉันจำเป็นต้องมีบัญชีหรือไม่?

ไม่ เปิดเครื่องมือ ปรับแต่งการควบคุม และคัดลอก CSS