เวอร์ชันก่อนหน้าของ CSS Flexible Box ข้อกำหนดเลย์เอาต์จะกำหนดตำแหน่งคงที่ของบุตรหลานที่มีตำแหน่งแบบสัมบูรณ์ เหมือนเป็นรายการ Flex ที่มีขนาด 0px x 0px ข้อกำหนดเวอร์ชันล่าสุดจะทำให้ข้อกำหนดเหล่านั้นไม่เป็นไปตามขั้นตอนโดยสมบูรณ์ และจะกำหนดตำแหน่งคงที่โดยอิงตามการปรับแนวและการจัดแนวพร็อพเพอร์ตี้ ในขณะที่เขียนบทความนี้ 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> ที่ฝังไว้จะอยู่ในคอนเทนเนอร์ <div> อย่างสมบูรณ์
สำหรับเบราว์เซอร์ที่ไม่เป็นไปตามข้อกำหนด มุมซ้ายบนของช่องสีเขียวจะอยู่ที่กึ่งกลางด้านบนของกล่องสีแดง
หากต้องการลองใช้ฟีเจอร์นี้ด้วยตัวเองใน Chrome หรือเบราว์เซอร์อื่นๆ โปรดดาวน์โหลดตัวอย่างของเราหรือไปที่การสาธิตการใช้งานจริง