【簡単】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で要素を両端に配置する方法についてご紹介しました。

今回のまとめです。

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

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