แสดงบทความที่มีป้ายกำกับ css แสดงบทความทั้งหมด
แสดงบทความที่มีป้ายกำกับ css แสดงบทความทั้งหมด

วันเสาร์ที่ 3 มกราคม พ.ศ. 2569

การจัดหน้าเว็บด้วย css flex

การออกแบบหน้าเว็บให้ยืดหยุ่นสำหรับแสดงได้ทั้งบนหน้าจอคอมพิวเตอร์และมือถือได้ง่ายขึ้น ในปัจจุบันจะนิยมใช้ display แบบ flexbox แต่ด้วยความที่ไม่ค่อยได้ใช้บ่อย เวลาใช้ทีก็จะงงๆ เลยมาจดบันทึกไว้หน่อย

การจัดเรียงวัตถุต่างๆ แบบ flex ก็จะต้องกำหนด container สำหรับบรรจุให้มีคุณสมบัติ flexbox เสียก่อน เช่น

.container { display: flex; }

div { display: flex; }

form { display: flex; }

การจัดเรียงตามแนวนอนแกน x เรียกว่า main-axis

การจัดเรียงตามแนวตั้งแกน y เรียกว่า cross-axis

จากนั้นก็กำหนดคุณสมบัติเกี่ยวกับ flexbox ให้กับวัตถุภายใน (flex item) ต่างๆ ลงไป โดยหากต้องการจัดเรียงวัตถุแบบซับซ้อน ก็สามารถกำหนดความเป็น container ให้กับวัตถุซ้อนลงไปหลายชั้นได้อีก นั่นคือ flex item ก็สามารถเป็น container ได้เช่นกัน