CSS Flexbox Playground
ทดลองใช้คุณสมบัติของคอนเทนเนอร์และไอเทม Flexbox ในพื้นที่ทดลองแบบเห็นภาพ ปรับทิศทาง การจัดตำแหน่ง การตัดคำ และค่า flex ของแต่ละไอเทม
미리보기에서 아이템을 클릭하면 속성을 편집할 수 있습니다.
Flexbox Playground คืออะไร
Flexbox playground คือเครื่องมือแบบอินเทอร์แอคทีฟที่ช่วยให้คุณทดลองใช้คุณสมบัติเลย์เอาต์ CSS Flexbox แบบเห็นภาพ คุณสามารถเปลี่ยนการตั้งค่าคอนเทนเนอร์ เช่น ทิศทาง การจัดวาง และการจัดตำแหน่ง และดูว่าไอเทม flex ถูกจัดเรียงใหม่ทันทีอย่างไร ช่วยให้นักพัฒนาเรียนรู้ Flexbox หรือสร้างต้นแบบเลย์เอาต์ได้อย่างรวดเร็วโดยไม่ต้องเขียน CSS ตั้งแต่เริ่มต้น
วิธีใช้งาน Flexbox Playground
- ตั้งค่าคุณสมบัติคอนเทนเนอร์ — เลือก flex-direction, justify-content, align-items, wrap และ gap
- เพิ่ม/ลบ ไอเทม — ใช้ปุ่มเพื่อเพิ่มหรือลบไอเทม flex (3 ถึง 10)
- แก้ไขคุณสมบัติไอเทม — คลิกที่ไอเทมใดก็ได้เพื่อตั้งค่า flex-grow, shrink, basis, order และ align-self
- ดูตัวอย่าง — ดูการอัปเดตเลย์เอาต์แบบเรียลไทม์
- คัดลอก CSS — คลิกคัดลอกเพื่อรับ CSS ที่สร้างขึ้นสำหรับทั้งคอนเทนเนอร์และไอเทม
ทำไมต้องใช้ Flexbox Playground นี้
- การเรียนรู้แบบเห็นภาพ — เข้าใจ Flexbox โดยเห็นการเปลี่ยนแปลงได้ทันที
- ควบคุมแต่ละไอเทม — ตั้งค่า flex-grow, shrink, basis, order และ align-self ของแต่ละไอเทมได้
- สร้าง CSS ที่สะอาด — รับ CSS ที่จัดรูปแบบอย่างดี ซึ่งคุณสามารถวางลงในโปรเจ็กต์ของคุณได้โดยตรง
- ไม่ต้องติดตั้ง — ใช้งานได้ทันทีในเบราว์เซอร์สมัยใหม่
- ความเป็นส่วนตัว — การประมวลผลทั้งหมดเกิดขึ้นในเครื่องของคุณ ไม่มีการส่งข้อมูลไปที่ใด
FreeToolbox เทียบกับเครื่องมือ Flexbox อื่นๆ
| คุณสมบัติ | FreeToolbox | Flexbox Froggy | CSS-Tricks Guide |
|---|---|---|---|
| การโต้ตอบ | แก้ไขได้เต็มรูปแบบ | แบบเกม | ตัวอย่างคงที่ |
| คุณสมบัติแต่ละไอเทม | มี | จำกัด | ไม่มี |
| ส่งออก CSS | มี | ไม่มี | ไม่มี |
| รองรับ Gap | มี | ไม่มี | N/A |
| ธีมสีดำ | มี | ไม่มี | ไม่มี |
คำถามที่พบบ่อย
ฉันสามารถเพิ่มไอเทมได้กี่ชิ้น
คุณสามารถมีไอเทม flex ได้ระหว่าง 1 ถึง 10 ชิ้น แต่ละไอเทมมีรหัสสีและสามารถกำหนดค่าแยกกันได้
flex-grow ทำอะไร
flex-grow กำหนดว่าไอเทมควรขยายขนาดมากน้อยเพียงใดเมื่อเทียบกับไอเทมอื่นๆ เมื่อมีพื้นที่ว่าง ค่า 0 หมายถึงไม่มีการขยาย ค่า 1 หมายถึงใช้ส่วนแบ่งพื้นที่ที่เหลือ
ความแตกต่างระหว่าง flex-basis และ width คืออะไร
flex-basis กำหนดขนาดเริ่มต้นของไอเทม flex ก่อนการกระจายพื้นที่ ทำงานตามแกนหลัก (ความกว้างในทิศทางแถว ความสูงในคอลัมน์) ต่างจาก width ตรงที่มันมีส่วนร่วมในอัลกอริทึม flex
ฉันสามารถใช้สิ่งนี้สำหรับเลย์เอาต์ที่ตอบสนองได้หรือไม่
ใช่ รวม flex-wrap กับค่า flex-basis ที่เป็นเปอร์เซ็นต์เพื่อสร้างเลย์เอาต์ที่ตอบสนองได้ playground นี้ช่วยให้คุณทดลองก่อนเขียน CSS ขั้นสุดท้าย
เครื่องมือนี้ฟรีหรือไม่
ใช่ ฟรีสมบูรณ์ ไม่มีข้อจำกัดหรือการลงทะเบียนที่จำเป็น