เกี่ยวกับเครื่องมือนี้
CSS Flexbox Playground เป็นเอดิเตอร์แบบโต้ตอบสำหรับ property เลย์เอาต์หลักของ flex container เลือกค่าสำหรับ flex-direction, justify-content, align-items และ flex-wrap จากดรอปดาวน์สี่ตัว แล้วตัวอย่างของกล่องมีหมายเลขห้ากล่องจะจัดเรียงใหม่ทันที คุณจึงเห็นได้ว่าแต่ละ property กำหนดรูปร่างเลย์เอาต์อย่างไรก่อนเขียนโค้ดใด ๆ
ด้านล่างตัวอย่าง กฎ .container ที่ตรงกันจะถูกสร้างขึ้นขณะที่คุณทำงาน: display: flex ตามด้วยการประกาศสี่รายการที่คุณเลือก ปุ่มเดียวคัดลอกทั้งบล็อกไปยังคลิปบอร์ดของคุณ พร้อมวางลงในสไตล์ชีต มีการเปิดเผยเฉพาะ property ระดับ container เหล่านี้เท่านั้น การตั้งค่าระดับรายการเช่น flex-grow, order หรือ align-self ไม่รวมอยู่ด้วย
ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลด ไม่มีบัญชีหรือการติดตาม และใช้งานออฟไลน์ได้ มันเป็นวิธีที่รวดเร็วในการสร้างสัญชาตญาณเรื่อง flexbox หรือผลิตกฎเริ่มต้นที่คุณนำไปปรับแต่งด้วยมือต่อได้
คำถามที่พบบ่อย
ตัวอย่างแสดงอะไร?
flex container ที่มีกล่องมีหมายเลขห้ากล่องซึ่งจัดเรียงใหม่แบบสดขณะที่คุณเปลี่ยน flex-direction, justify-content, align-items หรือ flex-wrap
CSS ที่สร้างขึ้นพร้อมใช้งานไหม?
ใช่ คัดลอกกฎ .container ที่สร้างขึ้นตรงเข้าสไตล์ชีตของคุณ มันมี display: flex บวก property สี่ตัวที่คุณเลือก
ฉันปรับ property ของ flexbox ตัวใดได้บ้าง?
ดรอปดาวน์สี่ตัวควบคุม flex-direction (row, row-reverse, column, column-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline) และ flex-wrap (nowrap, wrap, wrap-reverse)
เอาต์พุตมี gap หรือการตั้งค่า flex ระดับรายการไหม?
ไม่ กฎที่คัดลอกมีเพียง display: flex และ property ระดับ container สี่ตัว ช่องว่าง 8px ในตัวอย่างมีไว้เพื่อการเว้นระยะเท่านั้น และ property ระดับรายการเช่น flex-grow, order หรือ align-self ไม่รวมอยู่ด้วย
เครื่องมือเพิ่มเติม