Flexbox มีลักษณะการทำงานแบบใหม่สำหรับบุตรหลานที่มีตำแหน่งแน่นอน

Joe Medley

ข้อกำหนดการจัดวางกล่องยืดหยุ่น CSS เวอร์ชันเก่ากำหนดตำแหน่งคงที่ของรายการย่อยที่มีตำแหน่งแบบสัมบูรณ์ให้เหมือนกับเป็นรายการ Flex ที่มีขนาด 0 พิกเซล x 0 พิกเซล ข้อกําหนดเวอร์ชันล่าสุดจะนำองค์ประกอบเหล่านี้ออกจากโฟลว์โดยสมบูรณ์และตั้งค่าตำแหน่งแบบคงที่ตามพร็อพเพอร์ตี้ align และ justify ขณะเขียนบทความนี้ Edge และ Opera 39 สำหรับเดสก์ท็อปและ Android รองรับฟีเจอร์นี้แล้ว

ตัวอย่างเช่น ลองใช้ลักษณะการวางตำแหน่งบางอย่างกับ HTML ต่อไปนี้

<div class="container">
    <div>
    <p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
    </div>
</div>

เราจะเพิ่มข้อมูลประมาณนี้

.container {  
    display: flex;  
    align-items: center;  
    justify-content: center;   
}  
.container > * {  
    position: absolute;  
}

ใน Chrome เวอร์ชัน 52 ขึ้นไป <div> ที่ฝังอยู่จะวางอยู่ตรงกลางของ container <div> อย่างสมบูรณ์

ในเบราว์เซอร์ที่ไม่เป็นไปตามข้อกำหนด มุมซ้ายบนของช่องสีเขียวจะอยู่ตรงกลางด้านบนของช่องสีแดง

หากต้องการลองใช้ฟีเจอร์นี้ใน Chrome หรือเบราว์เซอร์อื่นๆ ด้วยตัวเอง ให้ดาวน์โหลดตัวอย่างหรือไปที่การสาธิตเวอร์ชันที่ใช้จริง