【CSS】要素を左右均等に並べよう【justify-content】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

１分で理解できるHTML/CSS講座シリーズです。

今回は要素を左右に均等に並べる方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

justify-contentとは

要素の配置を設定するプロパティです。
今回は均等に配置するための、以下の3つの設定にフォーカスを当てて解説します。

justify-content:space-around;
justify-content:space-between;
justify-content:space-evenly;

サンプルとして、四角い要素を3つ並べたものを用意しました。
これを、左右均等に並べていきましょう！

See the Pen
justify-content:SAMPLE by samehack (@samehack)
on CodePen.

justify-content:space-around;

各要素を均等に配置し各アイテムの両側に半分の大きさの間隔を置く方法
簡単にいうと、左右にマージンを設けて左右均等に配置する方法です。

See the Pen
justify-content:space-around by samehack (@samehack)
on CodePen.

justify-content:space-evenly;

各要素を均等に配置し、各アイテムの周りに同じ大きさの間隔を置く。
space-aroundとの違いは両端のマージンの幅です。
space-evenlyを使うと、すべてのマージン幅が同じになります。

See the Pen
justify-content:space-evenly by samehack (@samehack)
on CodePen.

justify-content:space-between;

各アイテムを均等に配置し最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せる
つまり、左右のマージンをなくして均等に配置します。

See the Pen
justify-content:space-evenly by samehack (@samehack)
on CodePen.

まとめ

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram