Flexbox が絶対位置の子に対する新しい動作を取得する

Joe Medley

以前のバージョンの CSS フレキシブル ボックス レイアウト仕様では、絶対配置された子の静的位置は、サイズが 0px × 0px のフレックス項目であるかのように設定されていました。最新バージョンの仕様では、これらの要素はフローから完全に除外され、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> の中央に完全に配置されます。

準拠していないブラウザでは、緑色のボックスの左上隅が赤色のボックスの中央上部に表示されます。

Chrome または他のブラウザで実際に試す場合は、サンプルをダウンロードするか、ライブデモをご覧ください。