ตัวสร้าง CSS Flexbox
สนามทดลองแบบภาพสำหรับสร้างเลย์เอาต์ flexbox พร้อมตัวอย่างสด
คุณสมบัติคอนเทนเนอร์
คุณสมบัติไอเทม
พรีเซ็ตเลย์เอาต์
ตัวอย่างสด
CSS ที่สร้างขึ้น
ตัวอย่างการใช้งาน
จัดกึ่งกลางเนื้อหา
จัดเนื้อหาให้อยู่กึ่งกลางทั้งแนวนอนและแนวตั้งด้วย flexbox
เลย์เอาต์แถบด้านข้าง
สร้างเลย์เอาต์แถบด้านข้าง + เนื้อหาหลักแบบคลาสสิกด้วย flexbox
กริดการ์ด
สร้างกริดการ์ดที่ตอบสนองพร้อมการห่อและระยะห่างเท่ากัน
คุณสมบัติ
ตัวอย่างภาพสด
ดูเลย์เอาต์ flexbox อัปเดตแบบเรียลไทม์เมื่อปรับคุณสมบัติ
โค้ด CSS พร้อมใช้
รับโค้ด CSS สะอาดพร้อมคัดลอกสำหรับคอนเทนเนอร์และไอเทม
พรีเซ็ตเลย์เอาต์
เริ่มต้นอย่างรวดเร็วด้วยพรีเซ็ตเลย์เอาต์ทั่วไป
ควบคุมแต่ละไอเทม
กำหนดค่าคุณสมบัติไอเทมแต่ละรายการเช่น order, flex-grow และ align-self
วิธีใช้?
ตั้งค่าคุณสมบัติคอนเทนเนอร์
เลือกค่า flex-direction, justify-content, align-items, flex-wrap และ gap
ปรับไอเทม
ตั้งจำนวนไอเทมและกำหนดค่าคุณสมบัติแต่ละไอเทม
คัดลอก CSS
คัดลอกโค้ด CSS ที่สร้างขึ้นและใช้ในโปรเจกต์ของคุณ
ชีทโกง CSS Flexbox
อ้างอิงด่วนสำหรับคุณสมบัติ Flexbox ทั้งหมด
คุณสมบัติคอนเทนเนอร์
| คุณสมบัติ | ค่า |
|---|---|
display | flex | inline-flex |
flex-direction | row | row-reverse | column | column-reverse |
flex-wrap | nowrap | wrap | wrap-reverse |
flex-flow | |
justify-content | flex-start | flex-end | center | space-between | space-around | space-evenly |
align-items | stretch | flex-start | flex-end | center | baseline |
align-content | flex-start | flex-end | center | space-between | space-around | stretch |
gap | |
row-gap | |
column-gap |
คุณสมบัติไอเทม
| คุณสมบัติ | ค่า |
|---|---|
order | |
flex-grow | |
flex-shrink | |
flex-basis | |
flex | |
align-self | auto | flex-start | flex-end | center | baseline | stretch |
คำถามที่พบบ่อย
ตัวสร้าง CSS Flexbox คืออะไร?
ตัวสร้าง Flexbox เป็นสนามทดลองแบบภาพที่คุณกำหนดค่าคุณสมบัติ flex container และ item แล้วเห็นผลลัพธ์ทันที ไม่ต้องเดาอีกแล้วว่า justify-content: space-between หน้าตาเป็นอย่างไร ปรับ ดูตัวอย่าง คัดลอก CSS
คุณสมบัติหลัก
ควบคุมคุณสมบัติคอนเทนเนอร์อย่าง flex-direction, wrap, justify-content, align-items และ gap อย่างเต็มที่ ควบคุมแต่ละไอเทมได้แก่ order, grow, shrink, basis และ align-self พรีเซ็ตเลย์เอาต์ (กึ่งกลาง, แถบด้านข้าง, holy grail, navbar, กริดการ์ด, footer) เริ่มต้นด้วยคลิกเดียว
กรณีใช้งานทั่วไป
จัดเนื้อหาให้อยู่กลางทั้งแนวตั้งและแนวนอน สร้างแถบนำทาง สร้างกริดการ์ดที่ตอบสนองพร้อมการห่อ และสร้างเลย์เอาต์แถบด้านข้างแบบคลาสสิก Flexbox จัดการรูปแบบเหล่านี้อย่างสวยงามด้วย CSS น้อยที่สุด
เคล็ดลับ
เริ่มจากพรีเซ็ตแล้วปรับแต่ง ใช้ gap แทน margin ระหว่าง flex item เพื่อโค้ดที่สะอาดขึ้น จำไว้ว่า flex-wrap: wrap คือเพื่อนที่ดีที่สุดสำหรับการออกแบบที่ตอบสนอง
ความเป็นส่วนตัว
ทุกอย่างทำงานในเบราว์เซอร์ ไม่มีข้อมูลเลย์เอาต์ออกจากเครื่องของคุณ
CSS Flexbox กับ Grid: ควรใช้ระบบ Layout ไหน?
ความแตกต่างระหว่าง Flexbox และ Grid คือหนึ่งมิติกับสองมิติ การรู้ว่าคุณกำลังจัดการกับอะไรทำให้การเลือกชัดเจน