شركة Flexbox تكتسب سلوكًا جديدًا للأطفال في الوضع المطلق

Joe Medley

كان هناك إصدار سابق من مواصفات التنسيق المربع المرن لـ CSS يحدد الموضع الثابت للعناصر الثانوية ذات الموضع المطلق كما لو كانت عنصرًا مرنًا بحجم 0 بكسل × 0 بكسل. أحدث إصدار من المواصفة يزيل هذه العناصر تمامًا من مسار العرض ويضبط موضع العنصر الثابت استنادًا إلى السمتَين align و justify. في وقت كتابة هذه المقالة، يتوفّر هذا الإجراء في Edge وOpera 39 للكمبيوتر المكتبي وAndroid.

على سبيل المثال، لنطبّق بعض سلوكيات تحديد الموضع على رمز 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;  
}

في الإصدار 52 من Chrome أو الإصدارات الأحدث، سيتم وضع <div> المُدمَج في منتصف الحاوية <div> تمامًا.

في المتصفحات غير المتوافقة، سيظهر أعلى يمين المربّع الأخضر في أعلى وسط المربّع الأحمر.

إذا أردت تجربة ذلك بنفسك في Chrome أو أي متصفّح آخر، نزِّل العيّنة أو انتقِل إلى العرض التجريبي المباشر.