EP.2 — อยากจัด Element ให้อยู่ตรงกลาง เขาทำยังไงกันนะ ?
ต่อจากตอนที่แล้ว เรารู้จักกับเทคนิคการใช้ Position และ Transform กันไปแล้วเนอะ บทความนี้เรามาต่อกันที่เทคนิคถัดไปกัน :)
2. Flexbox — เฟล็กซิเบิล ทำให้กล่องมันยืดหยุ่นได้ดั่งใจเรา
ใครที่คุ้นเคยกับคำสั่ง display: flex; แล้วจะพบว่าวิธีนี้มันง่ายๆมากที่จะจัดการกับปัญหาดังกล่าว
ส่วนใครที่พึ่งเคยเห็นเป็นครั้งแรก อาจจะไม่เข้าใจว่า เอ๊ะมันคืออะไรนะ
ถ้าให้เล่าคร่าวๆ Flexbox ก็คือ Layout Module ชนิดหนึ่งของ CSS นั่นเอง ซึ่งเมื่อก่อน Layout มีหลายรูปแบบมากทั้ง Block, Table, Positioning และอีกมากมาย ซึ่งต้องใช้ความพยายามและเวลาอย่างมากในการจัดการ layout ให้สวยงาม
Flexbox คือพระเอกที่ช่วยเข้ามาทำให้ชีวิตเราง่ายขึ้นอีกเป็นกอง (ง่ายยังไง เดี๋ยวแปะบทความที่น่าสนใจไว้ให้ด้านล่างนะ)
เหลามาเยอะ มาดูกันดีกว่า สมมติว่างานนี้ เราให้น้องแซลมอนด้านหลัง (หรือ flex container) มีชื่อคลาสว่า container และระบุการแสดงผลให้เป็น display: flex; ส่วนกล่องสีเหลืองๆ เราจะขอเรียกว่า flex item นะคะ
จากนั้นเพิ่ม justify-content: center; เพื่อเป็นการบอกให้ flex item เคลื่อนที่ไปอยู่ตรงกลางของ flex container ในแนว main axis หรือแนวนอนให้ที
คำสั่งถัดไปคือ align-items: center; เพื่อบอกให้ flex item เคลื่อนที่ไปอยู่ตรงกลางของ flex container ในแนว cross axis หรือแนวตั้ง
ประกอบโค้ดเข้าด้วยกันทั้งหมด
สมบูรณ์แบบ :-)
มีข้อเสนอแนะติชม หรือคำถามสงสัย คอมเมนท์ไว้ด้านล่างได้เลยนะคะ
ขอบคุณค่า 😊
