Spesifikasi Tata Letak Kotak Fleksibel CSS versi sebelumnya menetapkan posisi statis turunan yang diposisikan secara mutlak seolah-olah turunan tersebut adalah item fleksibel yang ukurannya 0x0 piksel. Versi terbaru spesifikasi menghilangkan sepenuhnya alur dan menetapkan posisi statis berdasarkan properti perataan dan ratakan. Pada saat laporan ini ditulis, Edge dan Opera 39 untuk desktop dan Android sudah mendukung fitur ini.
Sebagai contoh, mari kita terapkan beberapa perilaku pemosisian pada 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 berada di tengah secara sempurna di
penampung <div>.
Pada 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 lain, download contoh kami atau buka demo langsung.