【初心者向け】Flexboxの基礎！横並びレイアウトの作り方をやさしく解説

はじめに

Web制作で必須の Flexbox（フレックスボックス）。要素を自由に横並び・均等配置できる仕組みです。この記事では、よく使うプロパティを実際に動くデモ（CodePen）で確認しながら解説します。値を変えると並びがどう変わるか、目で見て理解しましょう！

フレックスボックスとは

要素を縦・横に自在に並べる仕組みです。div などは通常は縦並びになりますが、親要素に display: flex; を指定すると子要素が横並びになり、レイアウトを組めます。Web制作で頻出なので、ぜひ使いこなしましょう！

display: flex;

親要素に display: flex; を指定すると、子要素が横並びになります。下のデモで実際の並びを見てみましょう。

justify-content: space-between;

justify-content を使うと、横方向の配置を調整できます。space-between は、親要素の幅いっぱいに要素を両端から均等に配置します。

justify-content: space-around;

space-around も均等配置ですが、各要素の左右に均等な余白がつくため、両端にも余白ができます。space-between との違いをデモで見比べてみましょう。

flex-wrap: wrap;

flex-wrap: wrap; を指定すると、親要素に入りきらない子要素を折り返して並べられます。

flex-direction: column;

flex-direction: column; を指定すると、子要素を縦並びにできます。スマホ対応で「PCは横並び→スマホは縦並び」に切り替えるときによく使います。

実務でよく使う「gap」と「flex」プロパティ

基礎に慣れたら、この2つを覚えると一気に実戦的になります。

• gap：子要素どうしの間隔を一括指定。marginで隙間を作るより断然ラクで、余分な余白も出ません
• flex: 1：子要素に付けると「余ったスペースを分け合って伸びる」。カラムを均等幅にしたいときの定番です

.row {
  display: flex;
  gap: 16px;   /* 間隔をまとめて指定 */
}
.row .col {
  flex: 1;     /* 各カラムを均等の幅に */
}

justify-content と align-items の覚え方

この2つは初心者が必ず混乱するポイントです。私は「主役（横）はjustify、脇（縦）はalign」とセットで覚えました（※flex-direction: rowの場合）。

• justify-content → 横方向（主軸）の配置
• align-items → 縦方向（交差軸）の揃え

「左右の位置を変えたいのに align-items をいじっていた…」は私もよくやった失敗です。横を動かしたいなら justify-content と覚えておきましょう。

つまずき：子要素が中身に押されてはみ出す

Flexアイテムの中に長いテキストや画像があると、折り返さずに親からはみ出すことがあります。Flexアイテムが「縮みすぎない」初期設定になっているのが原因です。そんなときは、はみ出している子要素に min-width: 0; を付けると解決することが多いですよ。原因が分かりにくい“あるあるバグ”なので、知っておくと一気に対処できます。

まとめ

• 親に display: flex; で横並びの第一歩
• justify-content で横方向の配置（space-between / space-around など）
• flex-wrap: wrap で折り返し、flex-direction: column で縦並び
• 他にも align-items（縦方向の揃え）など便利なプロパティがあります

デモの値を変えて試すと、より早く身につきますよ！

Flexboxを使いこなせると、レイアウト制作のスピードが一気に上がります。学習や制作で詰まったら、ポートフォリオやココナラものぞいてみてくださいね。