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