【初心者向け】CSSでflexを使って要素を横並びにする方法

はじめに

CSSでレイアウトを組む際、要素を横並びに配置したいと感じる場面は多くあります。

しかし、実際にはdisplay:flex や flex-direction の仕組みを正しく理解していないと、意図しない表示崩れや配置のずれが発生してしまいます。

本記事では、flexの基礎から横並び・縦並びの切り替え、応用レイアウト、そしてトラブル対処まで網羅的に解説します。
難しく見えるレイアウト調整も、ポイントさえ抑えれば必ず扱えるようになります。

一つひとつ理解しながら、柔軟にレイアウトを組めるスキルを一緒に身につけていきましょう。

flexの基本を理解する

flexとは

flex（Flexbox） は、CSSで要素を柔軟に並べるためのレイアウト手法です。

従来のfloatやinline-blockでは難しかった、横並びや中央寄せ、均等配置などの複雑な配置を少ないコードで実現できます。

親要素に対してdisplay:flexを設定するだけで、子要素の並び方が自動的に整うため、Web制作の現場でも広く活用されている技術の一つです。

flexの基本構造

flexは親要素（フレックスコンテナ） と 子要素（フレックスアイテム） の関係で成り立ちます。

• 親要素：display:flex; を付与してレイアウトの土台を作る
• 子要素：特別な指定をしなくても自動で横並びになる

この明確な役割分担を理解することが、flex学習の第一歩となります。

横並びを実現する方法

display:flexの指定方法

横並びの最も基本的な方法は、親要素に対してdisplay:flex を指定することです。

<div class="parent">
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
</div>

.parent {
  display: flex;    /* 親要素に指定 */
}

.children {
  width: 40px;
  aspect-ratio: 1;
  border: 1px solid #47d3ab;
  background-color: #74e5c5;
}

これだけで内部の子要素が横方向に並び、block要素でも簡単に並列化できます。

初心者がよくつまづくポイントとして、flexを子要素に指定してしまうことがありますが、あくまで「親要素に指定する」という点が重要です。

縦並びとの違い

縦並びの仕組み

縦並びは flex-direction: column; を指定することで実現できます。

<div class="parent">
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
</div>

.parent {
  display: flex;
  flex-direction: column;
}

.children {
  width: 40px;
  aspect-ratio: 1;
  border: 1px solid #47d3ab;
  background-color: #74e5c5;
}

従来のblock要素による縦並びと異なり、flexの縦並びは上下方向の中央寄せや整列が柔軟に扱える利点があります。

flex-directionとは

要素が並ぶ方向は flex-direction で制御できます。

横並びは row（初期値） で実現され、縦並びは column を使用します。
flexはflex-directionだけで縦並び・横並びが簡単に切り替えられるため、メディアクエリと併用するとレスポンシブ対応が容易になります。

flexレイアウトの応用

余白調整

flexではgapプロパティを使うことで、子要素間の余白を簡単に設定できます。

<div class="parent">
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
</div>

.parent {
  display: flex;
  gap: 20px;    /* 余白を設定 */
}

.children {
  width: 40px;
  aspect-ratio: 1;
  border: 1px solid #47d3ab;
  background-color: #74e5c5;
}

marginを個別に調整する必要がなく、コードの可読性も向上します。

中央寄せ

水平方向と垂直方向の中央寄せは以下のように簡単に実現できます。

<div class="parent">
    <div class="children"></div>
</div>

.parent {
  display: flex;
  justify-content: center;    /* 水平方向の中央寄せ */
  align-items: center;    /* 垂直方向の中央寄せ */
  height: 100px;    /* 親要素の幅,高さを指定 */
  width: 100px;
}

.children {
  width: 40px;
  aspect-ratio: 1;
  border: 1px solid #47d3ab;
  background-color: #74e5c5;
}

従来のposition指定よりも直感的で、レイアウト崩れも起きにくくなります。

均等配置

要素を均等に並べたい場合は justify-content: space-between; を使用します。

<div class="parent">
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
</div>

.parent {
  display: flex;
  justify-content: space-between;   /* 均等配置 */
}

.children {
  width: 40px;
  aspect-ratio: 1;
  border: 1px solid #47d3ab;
  background-color: #74e5c5;
}

均等配置はヘッダーメニューやボタン配置でよく使用されるパターンです。

justify-contentに指定できる値は他にもいろいろな種類があるので、必要に応じて使い分けましょう。

よくあるトラブル

横並びが崩れる原因

横並びがうまくいかない場合は、次のような原因が考えられます。

• 親要素に display:flex が設定されていない
• 子要素の幅が大きすぎて、親幅を超えている
• 余白（margin）の合計が親要素の幅を超えている
• 親要素の幅が不足している
• 子要素が position:absolute などで絶対配置されている
• テキストや画像が折り返されてしまい、想定より幅を取っている

これらはflex固有の問題というより、幅・余白・折り返しといったCSS全体のバランスによって発生するケースが多いです。

横並びがうまくいかないときは、開発者ツールで実際に要素の幅やmarginがどう適用されているか確認してみましょう。

まとめ

本記事では、CSSのflexを利用して横並びを実現する方法について、基礎から応用、さらにトラブル対処まで段階的に解説しました。
flexは一度理解してしまえば、複雑なレイアウトもシンプルなコードで実装できます。

このようなHTML/CSSなどのWeb制作スキルを身につけたい方には、現役エンジニアがマンツーマンで指導する WEBMASTERS がおすすめです。
基礎の習得から実践的なレイアウト構築まで、1人では気付きにくいポイントも確実に身につけることができます。

flexの理解を第一歩として、さらに洗練されたWeb制作へと進んでいきましょう。