同じ行に中央寄せと右寄せを混在させたい…！(CSS)

はじめに

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

今回やりたかった事

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

flexbox を使えば、


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

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

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

方法

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

<div class="header-item">
  <h3>Goutfit</h3>
  <i class="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 を組み合わせる事で可能となります！

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