חברת Flexbox מקבלת התנהגות חדשה עבור ילדים בעלי מיקום מוחלט

ג'ו מדלי

Twitter GitHub

גרסה קודמת של מפרט הפריסה של CSS Flexible Box הגדירה את המיקום הסטטי של ילדים במיקום מוחלט, למרות שהם היו פריט גמיש שגודלו הוא 0 פיקסלים על 0 פיקסלים. בגרסה האחרונה של המפרט, המערכת מוציאה אותם מהזרימה ומגדירה את המיקום הסטטי על סמך יישור ויישור לשני המאפיינים. נכון למועד כתיבת ההודעה הזו, 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;  
}

בגרסאות Chrome 52 ואילך, ה-<div> המקונן ימוקם במרכז באופן מושלם במאגר <div>.

בדפדפנים לא תואמים, הפינה הימנית העליונה של התיבה הירוקה תופיע במרכז העליונה של התיבה האדומה.

אם אתם רוצים לנסות את התכונה הזו בעצמכם ב-Chrome או בכל דפדפן אחר, תוכלו להוריד את הדוגמה שלנו או לעבור אל ההדגמה החיה.