Flexbox Playground
ทดลองคุณสมบัติ CSS Flexbox บนรายการสด และคัดลอก CSS เลย์เอาต์ที่สร้างขึ้น
—
ทุกอย่างทำงานในเบราว์เซอร์ของคุณ — ไม่มีการอัปโหลด
เกี่ยวกับ Flexbox Playground
Flexbox Playground เป็นแซนด์บ็อกซ์ลงมือปฏิบัติสำหรับ CSS flexbox ตั้งค่าคุณสมบัติของ container — flex-direction, flex-wrap, justify-content, align-items, align-content และ gap — แล้วดูไอเทมสดสูงสุด 12 ชิ้นจัดเรียงใหม่ในพรีวิวทุกครั้งที่คุณเปลี่ยนค่า นี่คือวิธีที่เร็วที่สุดในการเข้าใจว่าแต่ละคุณสมบัติทำอะไรจริง ๆ
ไอเทมแต่ละชิ้นแก้ไขได้แยกกัน: คลิกเลือกแล้วปรับ flex-grow, flex-shrink, flex-basis, align-self และ order การเห็นไอเทมหนึ่งขยายจนกินพื้นที่ว่างขณะที่ไอเทมข้างเคียงยังคงความกว้างเดิม ช่วยให้เข้าใจโมเดลการคำนวณขนาด flex ได้เร็วกว่าแผนภาพใด ๆ
Playground สร้าง CSS ที่สะอาดสำหรับ container และไอเทมใด ๆ ที่มีการตั้งค่าไม่เป็นค่าเริ่มต้น — คัดลอกไปวางในสไตล์ชีตได้ทันที ทุกอย่างทำงานในเบราว์เซอร์ของคุณโดยไม่มีการอัปโหลด และปุ่มรีเซ็ตจะพาคุณกลับไปเริ่มต้นใหม่
วิธีใช้ Flexbox Playground
- ตั้งค่า flex-direction, wrap, justify-content, align-items, align-content และ gap ของ container
- เพิ่มหรือลบไอเทม — ระหว่าง 2 ถึง 12 ชิ้น — ให้ตรงกับคอมโพเนนต์จริงของคุณ
- คลิกไอเทมแล้วปรับ grow, shrink, basis, align-self และ order
- ดูพรีวิวสดอัปเดตทุกครั้งที่มีการเปลี่ยนแปลง
- คัดลอก CSS ที่สร้างขึ้นแล้ววางลงในโปรเจกต์ของคุณ