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

Joe Medley

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

ב-Chrome 52 ואילך, ה-<div> המוטמע ימוקם במרכז הקונטיינר <div>.

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

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