【初心者向け】CSSのflexbox（フレックスボックス）で要素を自由に並べる方法まとめ

1.flexboxとは？

flexbox（フレックスボックス）は、CSSで要素の配置や並び方を簡単にコントロールできるレイアウト方法です。

例えばこんな悩み、ありませんか？

要素を横に並べたいけど、うまくいかない
中央揃えがなかなか決まらない
子要素を均等に配置したい

→ そんなときに活躍するのがこの flexbox です！

できることの例

要素を横や縦に並べる
水平方向・垂直方向の中央揃え
子要素の幅や間隔を自動調整
スマホ対応のレイアウトもしやすい

キーワード

display: flex; を使えば、今まで難しかったレイアウトもスッキリ解決！

2.display: flex の基本の書き方

flexboxを使うときは、まず親要素に display: flex; を指定します。
これで「flexコンテナ」と呼ばれるようになり、中の子要素が自動的に整列されます。

🧩 HTMLの例

<div class="flex-column ">
  <div>ボックス1</div>
  <div>ボックス2</div>
  <div>ボックス3</div>
</div>

🎨 CSSの例

.flex-column  {
  display: flex;
}

結果

ボックス1

ボックス2

ボックス3

デフォルトでは子要素が横並びになります
スマホでもレスポンシブに対応しやすくなります

ポイント

親に display: flex; を書くだけで「横並び」になる！
子要素の幅は自動で調整される（均等にならない場合もあるが、それは後で調整可能）

3.要素を横並びにする方法

display: flex; を使うと、子要素はデフォルトで横に並びます。
これは「主軸（メイン軸）」が**横方向（row）**だからです。

🧩 具体例

<div class="flex-row">
  <div>赤</div>
  <div>青</div>
  <div>黄</div>
</div>

.flex-row {
  display: flex;
}

結果

赤

青

黄

3つの要素が 横一列 に並びます。

💡 補足：縦並びにしたいときは？

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

赤

青

黄

→ flex-direction: column; を使うと、縦並びになります。

よくあるミス

親に display: flex; をつけ忘れて、子が並ばない
子要素が大きすぎてはみ出す場合は、flex-wrapやgapで調整する

4.中央揃えのやり方（justify-content）」

要素を横並びにしたあと、その並びをどう揃えるかをコントロールするのが justify-content です。

これは主軸（横方向）に対する揃え方を決めるプロパティです。

よく使う値一覧

値	動き
`flex-start`	左寄せ（初期値）
`center`	中央揃え
`flex-end`	右寄せ
`space-between`	両端揃え＋中は等間隔
`space-around`	要素の周りに等間隔の余白
`space-evenly`	すべて均等な余白

例：中央揃えにする

.flex-center {
  display: flex;
  justify-content: center;
}

赤

青

黄

子要素全体が 横方向の中央 に集まります

ポイント

justify-content は 「主軸の揃え方」 → 横方向（デフォルト）に働く
縦の中央揃えはこのあと紹介する align-items を使う！

5.縦の揃え方（align-items）

align-items は、交差軸（デフォルトでは縦方向）に対する揃え方を決めるプロパティです。
つまり、要素の上下位置をコントロールします。

よく使う値一覧

値	動き
`flex-start`	上揃え
`center`	縦の中央揃え
`flex-end`	下揃え
`stretch`	高さを自動で揃える（初期値）
`baseline`	文字のベースラインに揃える

例：縦方向の中央揃え

.flex-vertical-center {
  display: flex;
  align-items: center;
}

赤

青

黄

子要素が親要素の縦の中央に揃う

注意ポイント

align-items: center; を効かせるには、**親要素に高さ（height）**がある必要があります！

6.よく使うflexのプロパティ早見表

ここまで紹介したプロパティを、一覧でおさらいしておきましょう👇

親要素（コンテナ）に使うプロパティ

プロパティ	内容
`display: flex`	Flexboxを有効にする
`flex-direction`	要素の並び方向（row, column など）
`justify-content`	主軸（横）の揃え方
`align-items`	交差軸（縦）の揃え方
`flex-wrap`	折り返しを許可するかどうか

📗 子要素に使うプロパティ

プロパティ	内容
`flex-grow`	余白に対してどれだけ広がるか
`flex-shrink`	収縮する度合い（省略可）
`flex-basis`	初期の幅（pxや%で指定）
`align-self`	特定の子要素だけ縦揃えを変更したいとき

ワンポイント

まずは display: flex、justify-content、align-items の3つから覚えればOK！

7.まとめ

この記事では、CSSの flexbox（フレックスボックス） を使った要素の並べ方・揃え方を紹介しました。

今回のおさらい

display: flex; で横並びが一発でできる！
justify-content で横方向（主軸）の揃え方を設定
align-items で縦方向（交差軸）の揃え方を調整
子要素の伸縮や間隔調整も柔軟にできる
レスポンシブ対応にも相性◎！

一言でまとめると…

Flexboxは、CSSレイアウトの悩みを一気に解決してくれる最強ツール！