Flexbox 為絕對定位子項的新行為

Joe Medley
Joe Medley
GitHub

先前版本的 CSS 彈性容器版面配置規格會將絕對定位子項的靜態位置設為彈性項目，大小為 0px x 0px。規格書的最新版本會將這些元素完全移出流程，並根據對齊和對齊屬性設定靜態位置。在撰寫本文時，Edge 和 Android 版 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 或其他瀏覽器中親自試用這項功能，請下載我們的範例，或前往實體示範。