Flexbox Generator

Visually build CSS Flexbox layouts.

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

จำนวนรายการ: 5

ดูตัวอย่างสด

CSS ที่สร้าง

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
  gap: 8px;
}

เกี่ยวกับเครื่องมือนี้

เครื่องมือสร้าง CSS Flexbox ช่วยให้คุณกำหนดค่า flex container ได้อย่างเห็นภาพ โดยปรับคุณสมบัติ flexbox หลักทั้งหมด — flex-direction, flex-wrap, justify-content, align-items และ align-content

Flexbox คือโมดูลเลย์เอาต์ CSS ที่ออกแบบมาสำหรับเลย์เอาต์หนึ่งมิติ (แถวหรือคอลัมน์) การเข้าใจวิธีที่แต่ละคุณสมบัติโต้ตอบกันเป็นสิ่งสำคัญ

วิธีใช้งาน

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

กรณีการใช้งาน

นักพัฒนา front-end ใช้เครื่องมือนี้ในการสร้างต้นแบบแถบนำทาง ตารางการ์ด และแถบเครื่องมืออย่างรวดเร็ว นักเรียน CSS ใช้เพื่อเรียนรู้การโต้ตอบของคุณสมบัติ flexbox อย่างเห็นภาพ

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

ความแตกต่างระหว่าง align-items และ align-content คืออะไร? — align-items จัดรายการภายในบรรทัดเดียว align-content ใช้ได้เมื่อมีหลายบรรทัดเท่านั้น
flexbox เหมาะสำหรับเลย์เอาต์สองมิติไหม? — Flexbox เป็นหนึ่งมิติ ใช้ CSS Grid สำหรับเลย์เอาต์กริดที่ซับซ้อน
flexbox รองรับทุกเบราว์เซอร์หรือไม่? — ใช่ Flexbox รองรับอย่างสมบูรณ์ในเบราว์เซอร์สมัยใหม่ทั้งหมด