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

Joe Medley
Joe Medley

在以前版本的 CSS Flexible Box 布局规范中,绝对定位的子项的静态位置设置为就像这些子项是尺寸为 0x0 像素的弹性项一样。最新版本的规范将它们完全从流程图中移出,并根据对齐和对齐属性设置静态位置。在撰写本文时,桌面版和 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 行为。

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

Legaci 行为。

如果您想在 Chrome 或任何其他浏览器中自行试用,请下载我们的示例或访问实时演示