Help us understand the problem. What is going on with this article?

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

はじめに

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

今回やりたかった事

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

flexbox を使えば、
Image from Gyazo
Image from Gyazo
2つの要素を片側に寄せたりとか、端と端に寄せたりとかは簡単なのですが、

1つを中央、もう1つを右端(もしくは左端)に配置したい場合は、どうしたら良いのでしょか?

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

方法

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

<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;
}

Image from Gyazo
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; とします。

すると、
Image from Gyazo

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

まとめ

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

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

nom0523
プログラミング学習で、自分が躓いた内容などをメインに記事を投稿しようと思います。 少しでも多くの方の参考になれば幸いです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away