CSS Esnek Kutu düzen spesifikasyonunun önceki bir sürümü, mutlak konumlandırılmış çocukların statik konumunu 0 piksel x 0 piksel boyutunda bir esnek öğe gibi ayarlıyordu. Spesifikasyonun en son sürümü bu öğeleri akıştan tamamen çıkarır ve statik konumu align ve justify özelliklerine göre ayarlar. Bu makalenin yazıldığı sırada Edge ve Android için Opera 39'un masaüstü sürümleri bu özelliği zaten destekliyor.
Örneğin, aşağıdaki HTML'ye bazı yerleşim davranışları uygulayalım.
<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>
Şuna benzer bir şey ekleriz:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
Chrome 52 veya sonraki sürümlerde iç içe yerleştirilmiş <div>, kapsayıcı <div> içinde mükemmel şekilde ortalanır.
Uyumlu olmayan tarayıcılarda, yeşil kutunun sol üst köşesi kırmızı kutunun üst ortasında olur.
Bunu Chrome'da veya başka bir tarayıcıda kendiniz denemek istiyorsanız örnek uygulamamızı indirin veya canlı demoyu ziyaret edin.