Wcześniejsza wersja specyfikacji układu CSS Flexible Box ustawiała stałą pozycję elementów podrzędnych o pozycji bezwzględnej 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ę.
Na przykład zastosujmy 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 zagłębiony element <div> będzie idealnie wyśrodkowany w kontenerze <div>.
W niespełniających wymagań 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.