記事内に広告が含まれています。

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

2018年9月22日

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>

-CSS