Flexbox を利用して要素を中央と右端に表示

📋 目次（クリックで展開）

Flexbox を利用して、要素を中央と右端に表示してみます。parent クラスで display: flex としているので、justify-content に center とすることで、子要素（メインアイテム）を中央表示にしています。

item クラスで position: absolute としているので、子要素（メニュー）は 常に右端にくっついています。また、parent クラスで position: relative としているので、子要素（メニュー）は親要素の中で絶対位置の計算が行われます。

イメージ

CSS

<style>
    .parent {
        position: relative;
        display: flex;
        justify-content: center;


        border: black solid 1px;
        padding: 20;
    }


    .item {
        display: flex;


        margin: 3px;
        padding: 15px;
        border: black solid 1px;
    }


    .menu {
        position: absolute;
        right: 0;


        margin: 3px;
        padding: 15px;
        border: black solid 1px;
    }
</style>

HTML

<div class="parent">
    <div class="item">メインアイテム</div>
    <div class="item">メインアイテム</div>
    <div class="menu">メニュー</div>
</div>

💬 コメント