Flexbox wprowadza nowe zachowanie dla dzieci ustawionych bezwzględnej pozycji

Joe Medley

W poprzedniej wersji specyfikacji układu CSS Flexible Box statyczne położenie elementów podrzędnych o pozycji bezwzględnej było ustawione tak, jakby były one elementem flex o wymiarach 0 x 0 pikseli. Najnowsza wersja specyfikacji całkowicie je eliminuje i ustala pozycję statyczną na podstawie właściwości align i justify. W momencie pisania tego tekstu Edge i Opera 39 na komputery oraz urządzenia z Androidem już obsługują tę funkcję.

Załóżmy na przykład, że stosujemy pewne zachowania pozycjonowania do tego kodu HTML.

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

Dodamy coś takiego:

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

W Chrome 52 lub nowszej wersji zagnieżdżony element <div> będzie idealnie wyśrodkowany w kontenerze <div>.

W niezgodnych przeglądarkach lewy górny róg zielonego pola będzie znajdować się w środku górnej części czerwonego pola.

Jeśli chcesz wypróbować tę funkcję w Chrome lub innej przeglądarce, pobierz naszą próbkę lub otwórz demo na żywo.