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

ジョー・メドレー
Joe Medley

以前のバージョンの CSS Flexible Box Layout 仕様では、絶対位置にある子の静的な位置は、サイズが 0px x 0px の Flex アイテムであるかのように設定されていました。最新バージョンの仕様では、この仕様は完全にフローから外れ、位置揃えと両端揃えのプロパティに基づいて静的な位置が設定されています。このドキュメントの作成時点では、パソコン版と 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 などのブラウザで試してみたい場合は、サンプルをダウンロードするか、ライブデモをご覧ください。