Neues Verhalten bei der Flexbox für untergeordnete Elemente in absoluten Positionen

Joe Medley
Joe Medley

In einer früheren Version der Layoutspezifikation CSS Flexible Box wurde die statische Position von absolut positionierten untergeordneten Elementen so festgelegt, als wären sie ein flexibles Element mit einer Größe von 0 x 0 Pixel. In der neuesten Version der Spezifikation werden sie vollständig aus dem Ablauf herausgenommen und die statische Position anhand der Attribute „align“ und „justify“ festgelegt. Zum Zeitpunkt der Veröffentlichung dieses Artikels wird dies von Edge und Opera 39 für Desktop-Computer und Android bereits unterstützt.

Im folgenden Beispiel wenden wir einige Positionierungsverhalten auf den folgenden HTML-Code an.

<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>

Wir fügen in etwa Folgendes hinzu:

.container {  
    display: flex;  
    align-items: center;  
    justify-content: center;   
}  
.container > * {  
    position: absolute;  
}

Ab Chrome 52 wird das verschachtelte <div> im Container <div> perfekt zentriert.

Verhalten von Chrome52.

In nicht konformen Browsern befindet sich die obere linke Ecke des grünen Feldes in der oberen Mitte des roten Kastens.

Legaci-Verhalten.

Wenn Sie dies in Chrome oder einem anderen Browser ausprobieren möchten, laden Sie unser Beispiel herunter oder sehen Sie sich die Live-Demo an.