はじめに

エンジニアならHTMLとCSSは出来て当たり前だと言われてますが、意外と奥が深く、調べないと分からない場面って結構ありますよね！
今回は、私が先日遭遇した、調べないと分からなかったCSSについてご紹介します！

今回やりたかった事

こんな感じで、ヘッダー内にロゴを中央寄せ、メニューアイコンを右寄せに配置しようとしました。

flexbox を使えば、


２つの要素を片側に寄せたりとか、端と端に寄せたりとかは簡単なのですが、

１つを中央、もう１つを右端（もしくは左端）に配置したい場合は、どうしたら良いのでしょか？

さっそく見ていきましょう！

方法

今回は、以下の状態から説明スタートです。

<divclass="header-item"><h3>Goutfit</h3><iclass="fas fa-bars"></i></div>

.header-item{display:flex;}h3{margin:0;line-height:50px;}i{line-height:50px;font-size:20px;}

line-heightとかサイズとか調整して、display flex で横並びにしてある状態です。

上記のCSSにjustify-contentを追加します。

.header-item{display:flex;justify-content:center;//追記}h3{margin:0;line-height:50px;}i{line-height:50px;font-size:20px;}

justify-content: center; で、取り敢えず要素を中央寄せにしました。

ここから、さらにアイコンだけを動かしていきます！

.header-item{display:flex;justify-content:center;position:relative;//追記}h3{margin:0;line-height:50px;}i{line-height:50px;font-size:20px;position:absolute;//追記right:0;//追記}

親要素に position: relative; を追加。
アイコンに position: absolute; を追加し、
親要素を機転に right: 0; とします。

すると、

求めていた配置にする事ができました！！

まとめ

flexbox だけでは出来なかった配置も、
position を組み合わせる事で可能となります！

今回の記事が少しでも参考になれば嬉しいです！