CSSのフレックスボックスで要素を左右に寄せる方法を完全ガイド！初心者でもわかるjustify-content: space-between
生徒
「横に並べた要素をきれいに左右に広げたいのですが、CSSでできますか？」
先生
「フレックスボックスという仕組みを使えば、要素を簡単に左右に寄せて配置できますよ。特にjustify-content: space-betweenという設定が便利です。」
生徒
「space-betweenってどういう意味なんですか？難しそうに聞こえます…。」
先生
「大丈夫です。初心者でもすぐ理解できますよ。まずはどんな働きをするのか見ていきましょう。」
1. justify-content: space-betweenとは？初心者でも理解できる基本の仕組み
CSSのflexbox（フレックスボックス）は、要素を横並びや縦並びに自由に配置できる便利なレイアウト方法です。その中でもよく使われる機能が「justify-content」です。これは、横方向の並び方を決めるための設定です。
justify-contentにはいくつかの値がありますが、その中の一つが「space-between（スペース・ビトウィーン）」です。これは、要素を「両端にぴったり寄せて、間のスペースを均等にする」動きをします。例えば、左端にひとつ、右端にひとつ、真ん中にもうひとつ要素があるような形です。
簡単にいうと「左右に引っ張られて、間がきれいに空く配置」です。レストランでお皿を左右に広げて、真ん中にスペースを確保するイメージに近いです。Web制作ではナビゲーションバーやメニュー配置に非常によく使われることから、初心者でも必ず覚えておくべきテクニックです。
2. justify-content: space-betweenの基本的な使い方
space-betweenを使うには、まず親要素にdisplay:flexを指定します。そこにjustify-content: space-betweenを設定すると、子要素が左右に広がって配置されます。例えば、ロゴを左側に、メニューを右側に配置する、といった使い方が簡単にできます。
<style>
.nav {
display: flex;
justify-content: space-between;
background: #cfe2ff;
padding: 20px;
}
.item {
font-size: 18px;
}
</style>
<div class="nav">
<div class="item">ロゴ</div>
<div class="item">メニュー</div>
</div>
3. justify-content: space-betweenで配置が変わる理由
space-betweenがどのように動くか理解するために仕組みを簡単に見てみましょう。フレックスボックスでは、横方向の空いているスペースを「どこに配分するか」をjustify-contentが決めています。
space-betweenを設定すると、余ったスペースは「子要素と子要素の間」にすべて割り当てられます。そのため左右に最大限広がり、両端にぴったり寄るわけです。
たとえば、棚に本を並べるときに、端の本を左右に押し付けて、真ん中のスペースを広げるようなイメージです。これが視覚的にも整ったデザインを作る助けになります。
4. よく使われる場面：ナビゲーションメニューの配置
justify-content: space-betweenは、特にナビゲーションバー（メニュー）でよく使用されます。左側にロゴ、右側にメニューというシンプルで分かりやすいデザインを作ることができるからです。
今までfloatを使ったり細かい余白調整が必要だった作業が、フレックスボックスを使うだけでスッキリ整理されるため初心者でも安心して使えます。
5. 実際に複数の項目をspace-betweenで並べてみよう
次は3つ以上の要素を並べた場合の例を見てみましょう。space-betweenは要素の数が多いときほど効果が分かりやすくなります。すべての要素の間に均等な距離が生まれるため、バランスの良い配置を簡単に作れます。
<style>
.menu {
display: flex;
justify-content: space-between;
background: #e2e3e5;
padding: 15px;
}
.menu-item {
padding: 8px 12px;
background: #fff;
border-radius: 5px;
}
</style>
<div class="menu">
<div class="menu-item">ホーム</div>
<div class="menu-item">サービス</div>
<div class="menu-item">お問い合わせ</div>
</div>
6. space-betweenが適している場面と向かない場面
space-betweenは左右に要素を広げたい場面では大活躍します。しかし「固定間隔で並べたい」場合にはあまり向きません。例えばすべてのボタンを10px間隔で並べたいときはgapを使う方が向いています。
space-betweenは「空いたスペースをどう配分するか」をコントロールするものなので、画面の幅が変わると配置も変わる特徴があります。これを理解しておくと、デザインが思った通りに動かない原因を見つけやすくなります。
7. justify-contentの他の値との違いをやさしく理解する
space-betweenの特徴をより深くつかむために、他の値とも比べてみましょう。flex-startは左寄せ、flex-endは右寄せ、centerは中央寄せです。しかしこれらでは大きなスペースを調整することはできません。
space-betweenは「端に寄せつつ真ん中を整える」という独特の動きを持っているため、ナビゲーションやヘッダーなどのバランスが大切な場所で特に強い力を発揮します。
8. 初心者が覚えておきたい注意点とポイント
space-betweenを使う上で最も大切な注意点は「要素が2個以上ないと意味がない」ということです。1つしかない場合、スペースを分配する相手がいないため効果がありません。
また、意図せず左右に大きく広がりすぎる場合は、親要素の幅が広すぎることもあります。そんなときは親要素に最大幅（max-width）を指定したり、余白の調整を見直すと良い結果につながります。
初心者にとっては、まず「左右に大きく広げて配置する」という基本的な理解だけで十分です。使っていくうちに自然と動きの感覚が掴めるようになります。
