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

Joe Medley

Twitter GitHub

舊版 CSS 彈性方塊版面配置規格為絕對定位子項設定的靜態位置，正如其大小為 0 x 0 像素的彈性項目。最新版規格會完全用盡流程，並根據校正及合理化屬性設定靜態位置。在撰寫本文時，電腦版和 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> 中置中顯示。

在不相容的瀏覽器中，綠色方塊的左上角會顯示在紅色方塊的正上方。

如果想在 Chrome 或任何其他瀏覽器中試用這項功能，請下載範例或造訪現場示範。