Flexbox 为绝对定位的子项带来了新行为

Joe Medley
Joe Medley
GitHub

旧版 CSS 弹性盒布局规范会将绝对定位的子元素的静态位置设置为大小为 0px x 0px 的 flex 项。最新版规范会将这些元素完全移出流程，并根据 align 和 justify 属性设置静态位置。在撰写本文时，桌面版和 Android 版 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> 中居中对齐。

Chrome52 行为。

在不合规的浏览器中，绿色框的左上角将位于红色框的顶部中心。

旧版行为。

如果您想在 Chrome 或任何其他浏览器中亲自试用此功能，请下载我们的示例或访问实时演示。