یک نسخه قبلی از مشخصات چیدمان جعبه انعطاف پذیر CSS، موقعیت ایستا کودکان با موقعیت مطلق را طوری تنظیم می کرد که گویی یک آیتم انعطاف پذیر هستند که اندازه آن 0 پیکسل در 0 پیکسل است. آخرین نسخه مشخصات آنها را کاملاً از جریان خارج می کند و موقعیت استاتیک را بر اساس ویژگی های align و justify تنظیم می کند. در زمان نگارش این مقاله، Edge و Opera 39 برای دسکتاپ و اندروید از قبل از این پشتیبانی می کنند.
برای مثال، اجازه دهید برخی از رفتارهای موقعیت یابی را در 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>
چیزی شبیه به این اضافه می کنیم:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
در Chrome 52 یا جدیدتر، <div> تودرتو کاملاً در مرکز ظرف <div> قرار می‌گیرد.
در مرورگرهای غیر منطبق، گوشه سمت چپ بالای کادر سبز در مرکز بالای کادر قرمز خواهد بود.
اگر می‌خواهید این را برای خودتان در Chrome یا هر مرورگر دیگری امتحان کنید، نمونه ما را دانلود کنید یا از نسخه آزمایشی زنده دیدن کنید.