ตัวสร้าง CSS Flexbox
CSS Flexbox Generator ให้คุณตั้งค่า flex-direction, justify-content, align-items, flex-wrap, align-content และ gap บน container ดูพรีวิวได้สูงสุด 20 รายการแบบเรียลไทม์ และคัดลอก CSS ที่สร้างขึ้น
เกี่ยวกับเครื่องมือนี้
CSS Flexbox Generator ให้คุณตั้งค่า flex-direction, justify-content, align-items, flex-wrap, align-content และ gap บน container ดูพรีวิวได้สูงสุด 20 รายการแบบเรียลไทม์ และคัดลอก CSS ที่สร้างขึ้น
วิธีใช้
- เลือกทิศทางและการตัดบรรทัด (wrap)
- ตั้งค่า justify-content และ align-items (และ align-content สำหรับกรณีที่มีหลายบรรทัด)
- ตั้งค่า gap และจำนวนรายการในพรีวิว
- คลิก Copy CSS เพื่อนำกฎของ container ไปใช้
ข้อควรรู้
- justify-content จัดเรียงรายการตามแกนหลัก ส่วน align-items จัดตามแกนขวาง
- flex-direction: column จะสลับแกน ทำให้ justify-content ทำงานในแนวตั้งแทน
- align-content มีผลเฉพาะเมื่อรายการถูกตัดขึ้นหลายบรรทัด
- property gap ใช้กับ Flexbox ได้ในเบราว์เซอร์หลักทุกตัวในปัจจุบัน
- Flexbox เป็นแบบมิติเดียว หากต้องการจัดทั้งแถวและคอลัมน์พร้อมกันให้ใช้ CSS Grid
ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดหรือจัดเก็บ
คำถามที่พบบ่อย
จัด div ให้อยู่กึ่งกลางด้วย Flexbox อย่างไร?
ที่ element แม่ ให้ตั้ง display: flex; justify-content: center; align-items: center; แล้ว element ลูกจะอยู่กึ่งกลางทั้งแนวนอนและแนวตั้ง
justify-content กับ align-items ต่างกันอย่างไร?
justify-content กระจายรายการตามแกนหลัก (ค่าเริ่มต้นคือแนวแถว) ส่วน align-items จัดตำแหน่งตามแกนขวาง
ควรใช้ Flexbox แทน Grid เมื่อไร?
ใช้ Flexbox กับเลย์เอาต์มิติเดียว เช่น แถบเมนูและแถวปุ่ม และใช้ Grid กับเลย์เอาต์หน้าเว็บแบบสองมิติ
ทำไม align-content ไม่มีผลอะไรเลย?
align-content มีผลเฉพาะเมื่อ flex-wrap อนุญาตให้รายการตัดขึ้นมากกว่าหนึ่งบรรทัด