CSS Flexbox คืออะไร?
CSS Flexbox (Flexible Box Layout) คือโมเดลเลย์เอาต์แบบหนึ่งมิติสำหรับการกระจายพื้นที่และจัดเรียงรายการในแถวหรือคอลัมน์ คอนเทนเนอร์ flex กำหนดด้วย display: flex และลูกโดยตรงของมันกลายเป็นรายการ flex คุณสมบัติหลักของคอนเทนเนอร์: flex-direction (แถวหรือคอลัมน์), flex-wrap (บรรทัดเดียว vs. หลายบรรทัด), justify-content (การจัดเรียงตามแกนหลัก), align-items (การจัดเรียงตามแกนตัดขวางต่อบรรทัด) และ align-content (การจัดเรียงตามแกนตัดขวางของหลายบรรทัด) คุณสมบัติหลักของรายการ: flex-grow (รายการขยายเท่าใด), flex-shrink (หดเท่าใด), flex-basis (ขนาดเริ่มต้น) และ align-self (แทนที่ align-items ของคอนเทนเนอร์สำหรับรายการเฉพาะ) Flexbox เหมาะสำหรับแถบนำทาง แถวของการ์ด เลย์เอาต์แบบกึ่งกลาง และการจัดเรียงแบบหนึ่งมิติทุกประเภท
วิธีใช้เครื่องสร้าง CSS Flexbox
-
ปรับคุณสมบัติของคอนเทนเนอร์ (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) โดยใช้เมนูดรอปดาวน์และช่องป้อนข้อมูล
-
คลิกที่รายการใดก็ได้ในพรีวิวเพื่อเลือก (จะกลายเป็นสีส้ม)
-
ตั้งค่า flex-grow, flex-shrink, flex-basis และ align-self ของรายการที่เลือกในแผงรายการ
-
คลิก '+ เพิ่มรายการ' เพื่อเพิ่มรายการ คลิก 'ลบ' เพื่อลบรายการที่เลือก
-
สลับระหว่างแท็บ CSS และ HTML เพื่อดูโค้ดที่สร้างขึ้น จากนั้นคลิกคัดลอก
-
คลิก 'รีเซ็ตทั้งหมด' เพื่อเริ่มใหม่ด้วยเลย์เอาต์เริ่มต้น 3 รายการ