เครื่องมือสร้างเลย์เอาต์ CSS

นี่คือเครื่องมือบนเว็บที่ยอดเยี่ยมที่ช่วยให้คุณสร้างเลย์เอาต์ CSS Flexbox และ CSS Grid ในรูปแบบที่เข้าใจง่ายผ่านหน้าจอแบบกราฟิก คุณสามารถระดมไอเดีย ปรับแต่งพารามิเตอร์ และออกแบบอินเทอร์เฟซที่ซับซ้อนได้อย่างอิสระโดยไม่ต้องพิมพ์ CSS ทีละบรรทัด

เครื่องมือนี้รองรับคุณสมบัติที่สำคัญทั้งหมดของ Flexbox (justify-content, align-items, flex-wrap...) และ CSS Grid (grid-template-columns, gap...) การดำเนินการลากและวางและการปรับค่าต่างๆ ทั้งหมดจะแสดงผลทันทีบนหน้าจอดูตัวอย่าง (Real-time preview)

กระบวนการคำนวณและการสร้างโค้ดทั้งหมดทำงานบนเบราว์เซอร์ของคุณ จะไม่มีข้อมูลใดถูกส่งออกไป เพื่อให้มั่นใจถึงความปลอดภัยและความเร็วสูงสุด

Flexbox

โมดูลการจัดวางเลย์เอาต์ของ CSS3 มีประโยชน์อย่างมากในการจัดเรียงวัตถุตามรูปแบบ 1 มิติ (แนวนอนหรือแนวตั้ง) มักใช้สำหรับการทำเมนู (nav), แถบปุ่ม หรือรายการการ์ด

CSS Grid

เป็นโมดูลการจัดวางเลย์เอาต์ของ CSS3 เช่นกัน แต่มีประสิทธิภาพมากกว่า ใช้สำหรับจัดเรียงวัตถุในรูปแบบ 2 มิติ (จัดการทั้งแนวนอนและแนวตั้งพร้อมกัน) เหมาะมากสำหรับการแบ่งบล็อกขนาดใหญ่ของหน้าเว็บ

justify-content

คุณสมบัติสำคัญที่ใช้กำหนดการกระจายตัวของระยะห่างของบล็อกย่อยตามแกนหลัก (main axis) เช่น จัดกึ่งกลาง (center) หรือเว้นระยะห่างเท่าๆ กันระหว่างขอบ (space-between)

align-items

คุณสมบัติที่ใช้ควบคุมตำแหน่งของบล็อกย่อย แต่ทำงานบนแกนรอง (cross axis) ตัวอย่างเช่น การยืดขนาดให้เต็มพื้นที่ตั้งแต่ขอบบนถึงขอบล่าง (stretch) หรือจัดกึ่งกลาง (center)

Q. ทำอย่างไรถึงจะรู้ว่าควรใช้ Flexbox หรือ Grid?

A. คำแนะนำจากผู้เชี่ยวชาญ: หากคุณจัดเรียงรายการใน 1 มิติ (แนวนอนหรือแนวตั้ง) ให้ใช้ Flexbox ก็เพียงพอ แต่ถ้าคุณต้องการออกแบบเลย์เอาต์ฟอร์มขนาดใหญ่ที่แบ่งย่อยออกเป็นหลายส่วน ควรเลือกใช้ Grid ที่นิยมที่สุดคือการใช้ผสมกัน: ใช้ Grid เป็นโครงสร้างหลักเพื่อแบ่งบล็อกใหญ่ และใช้ Flexbox จัดเรียงองค์ประกอบย่อยภายในบล็อกเหล่านั้น

Q. เครื่องมือนี้สามารถสร้าง CSS ที่เข้ากันได้กับโทรศัพท์มือถือ (Responsive) หรือไม่?

A. เครื่องมือไม่ได้ฝัง query ที่แจ้งเตือนการเปลี่ยนแปลงขนาดอย่าง @media โดยอัตโนมัติ แต่คุณสามารถสร้างอินเทอร์เฟซอัจฉริยะที่ตอบสนองอัตโนมัติโดยใช้ประโยชน์จากคุณสมบัติที่มีอยู่ได้ เช่น การเปลี่ยน flex-wrap เป็น wrap หรือใช้ฟังก์ชัน repeat(auto-fit, minmax(...)) ในตัวเลือกของ Grid

Q. สามารถทำงานได้ดีบน IE11 หรือไม่?

A. เครื่องมือมุ่งเน้นที่การสร้างมาตรฐาน CSS ที่ทันสมัยที่สุดในปัจจุบัน ดังนั้นคุณลักษณะบางอย่าง โดยเฉพาะ Grid และระยะห่าง (gap) อาจจะไม่ทำงานเมื่อใช้งานบน IE11 อย่างแน่นอน