Flexbox, mutlak konumlandırılmış alt öğeler için yeni davranış haline geliyor

Ali Porsuk
Ali Polat

CSS Esnek Kutusu düzen spesifikasyonunun önceki bir sürümü, mutlak konumlandırılmış alt öğelerin statik konumunu, boyutu 0 piksele 0 piksel olan bir esnek öğe olarak ayarlıyordu. Spesifikasyonun en son sürümünde, teknikler tamamen akıştan çıkarılır ve statik konum, hizalama ve gerekçelendirme özelliklerine göre ayarlanır. Bu makalenin yazıldığı sırada Edge, masaüstü ve Android için Opera 39 bunu zaten desteklemektedir.

Örnek olarak, aşağıdaki HTML'ye bazı konumlandırma 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>

Aşağıdaki gibi bir uzantı ekleyeceğiz:

.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>, <div> kapsayıcısının içinde mükemmel bir şekilde ortalanır.

Chrome52 davranışı.

Uyumlu olmayan tarayıcılarda, yeşil kutunun sol üst köşesi kırmızı kutunun üst merkezinde yer alır.

Legaci davranış.

Bunu Chrome'da veya başka bir tarayıcıda kendiniz denemek istiyorsanız örneğimizi indirin veya canlı demoyu ziyaret edin.