เครื่องสร้าง CSS Flexbox
สร้าง layout ของ CSS flexbox แบบเห็นภาพ: flex-direction, justify-content, align-items, flex-wrap และ gap บน container รวมถึง flex-grow, flex-shrink และ flex-basis ต่อ child แต่ละตัว พร้อมตัวอย่างแสดงผลสดและ CSS ที่คัดลอกได้
🔒 ประมวลผลทั้งหมดในเบราว์เซอร์ของคุณ — ไม่มีการอัปโหลดสิ่งใดที่คุณป้อนที่นี่
ผลลัพธ์
Layout แบบ flexbox มีกฎสองชุดที่แยกจากกัน — คุณสมบัติของ container (flex-direction, justify-content, align-items, flex-wrap, gap) และคุณสมบัติของ child แต่ละตัว (flex-grow, flex-shrink, flex-basis) — และการปนเปกันเป็นสาเหตุที่พบบ่อยที่สุดของบั๊กแนว ๆ “ทำไมถึงไม่จัดกึ่งกลาง / ไม่ขยาย / ไม่ wrap อย่างที่คิด” เครื่องสร้างนี้แสดงกฎทั้งสองชุดบนหน้าจอพร้อมกัน: เปลี่ยนตัวควบคุม container หรือฟิลด์ของ child ตัวใดก็ตาม แล้วกล่องตัวอย่างสามกล่องที่มีหมายเลขและสีจะอัปเดตทันที ทำให้เห็นเหตุและผลชัดเจน
ฝั่ง container ครอบคลุมทุกมิติของ layout: เลือก direction, เลือกวิธีกระจาย child ตามแกนหลักด้วย justify-content, จัดวางแนวบนแกนไขว้, กำหนดว่าพวกมันจะ wrap ขึ้นบรรทัดใหม่หรือไม่ และตั้ง gap แทนการใช้เทคนิค margin ระหว่างกัน ฝั่ง child ก็สมจริงไม่แพ้กัน: เพิ่มกล่องได้สูงสุดแปด ลดได้เหลือสอง และกำหนด flex-grow, flex-shrink และ flex-basis ให้แต่ละกล่อง — เครื่องสร้างจะพิมพ์กฎ CSS ต่อ child เมื่อมีอย่างน้อยหนึ่งค่าที่แตกต่างจากค่าเริ่มต้นของเบราว์เซอร์ โค้ดที่คัดลอกจึงไม่มี flex-grow: 0 มากองไว้ในกล่องที่ไม่ต้องการ
หน้า preset ช่วยให้คุณไปที่ layout ที่คนค้นหาด้วยชื่อจริง ๆ ได้ทันที: วิธีจัดกึ่งกลาง div (คำถาม layout CSS ที่ถูกถามมากที่สุด แก้ไขด้วย justify-content และ align-items ที่ตั้งเป็น center ทั้งคู่), navbar โลโก้ซ้ายลิงก์ขวา, คอลัมน์ยืดหยุ่นความกว้างเท่ากันผ่าน flex-grow, และการเปรียบเทียบแบบข้างกันระหว่าง space-between กับค่าที่ใกล้เคียงอย่าง space-around และ space-evenly
เช่นเดียวกับทุกเครื่องมือในไซต์นี้ เครื่องสร้างนี้ฟรีและทำงานทั้งหมดในเบราว์เซอร์ของคุณ: ไม่ต้องอัปโหลด ไม่ต้องมีบัญชี และทำงานแบบออฟไลน์ได้หลังจากโหลดหน้าเว็บแล้ว