HTML/CSS

【簡単】CSSで要素を両端に配置する方法

CSSをいじっているときに、「この要素を両端に置きたいんだけどなぁ」と思ったことはありませんか?

調べてみると、上下左右に寄せる方法はすぐに見つかるのですが、いざ両端に配置するとなると、ちょっと悩んでしまいました。

私のほかにも悩んでいる方や困っている方がいるかもしれませんので、そのときに調べた内容を記事にしておこうと思います。

そんなわけで、今回はCSSで要素を両端に配置する方法についてご紹介しますね。

両端に配置する場合は、display: flexとjustify-content: space-betweenを使うべし!

まずは、両端に配置するイメージを共有しますね。

私がやろうとした配置イメージは以下となります。

親要素の内側両端に子要素を配置するイメージ

割とありがちな配置だと思います。

そこで、まずは以下のようにHTMLを組んでみました。

<div class="parent">
  <div class="child1"><p>child1</p></div>
  <p>parent</p>
  <div class="child2"><p>child2</p></div>
</div>

しかし、このあとにCSSをどうすればいいのかわからず、手が止まってしまいました。

.parent {
  margin: 40px;
  background-color: green;
}
.child1 {
  background-color: greenyellow;
}
.child2 {
  background-color: blue;
}

この時点では、以下のように表示されています。

子要素が両端に揃っていない状態

困った時はドキュメントだと思い、MDNのドキュメントを調べてみたところ、「justify-content:space-between」を見つけました。

ここのサンプルが理想的な動きをしているのです!
「そうそうこれこれ!」という感じでした。

早速これを使ってCSSを以下のように修正してみました。

.parent {
  margin: 40px;
  background-color: green;
  display: flex;
  justify-content: space-between;
}
.child1 {
  background-color: greenyellow;
}
.child2 {
  background-color: blue;
}

親要素に「display: flex」と「justify-content: space-between」を追加しています。

すると、以下のように要素が両端に配置されました!

子要素が両端に配置された状態

イメージ通りですね。
やはり困った時はMDNドキュメントに限りますね。

あとは全体のスタイルを調整して完成です。

.parent {
  height: 300px;
  line-height: 268px;
  text-align: center;
  margin: 40px;
  background-color: green;
  display: flex;
  justify-content: space-between;
}
.child1 {
  margin: 8px;
  padding: 8px;
  line-height: 236px;
  text-align: center;
  background-color: greenyellow;
}
.child2 {
  margin: 8px;
  padding: 8px;
  line-height: 236px;
  text-align: center;
  background-color: blue;
}

完成図はこちらです。

子要素が両端に配置された状態

注意点としては、両端に寄せたい要素の親要素をflexにすることですね。

CSS の justify-content プロパティは、フレックスコンテナーの主軸およびグリッドコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義します。

MDN web docs : justify-content

ここではparentが親要素なので、display: flexを指定しています。

終わりに

今回はCSSで要素を両端に配置する方法についてご紹介しました。

今回のまとめです。

まとめ

要素を両端揃えにしたい場合は、
親要素にdisplay: flexとjustify-content:space-betweenを指定する

余談ですが、CSSについて調べたい場合は、以下のサイトがおすすめですよ。

MDN web docs
==> FirefoxでおなじみのMozillaのサイトです。悩んだらここですね。

HTML クリックリファレンス
==> タグ別や目的別に分類されています。辞書のようなイメージで使いやすいです。

今回はここまでです。それでは。