旧版 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>
中居中显示。
在不合规的浏览器中,绿色框的左上角将位于红色框的顶部中心。