Versi sebelumnya dari spesifikasi Tata Letak CSS Flexible Box menetapkan posisi statis turunan yang diposisikan absolut seolah-olah turunan tersebut adalah item fleksibel yang ukurannya 0x0 piksel. Versi terbaru spesifikasi akan sepenuhnya mengeluarkannya dari alur dan menetapkan posisi statis berdasarkan properti align dan justify. Pada saat penulisan ini, Edge dan Opera 39 untuk desktop dan Android sudah mendukungnya.
Sebagai contoh, mari kita terapkan beberapa perilaku pemosisian ke HTML berikut.
<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>
Kita akan menambahkan sesuatu seperti ini:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
Di Chrome 52 atau yang lebih baru, <div> bertingkat akan dipusatkan dengan sempurna di
<div> penampung.
Di browser yang tidak sesuai, sudut kiri atas kotak hijau akan berada di tengah atas kotak merah.
Jika Anda ingin mencobanya sendiri di Chrome atau browser lainnya, download contoh kami atau buka demo langsung.