CSS Flexbox入門：横並びレイアウトを自由に操る基本

  • #CSS
  • #Flexbox
  • #レイアウト
  • #初心者向け
  • #Webデザイン

CSS Flexbox入門：横並びレイアウトを自由に操る基本

導入

Webサイトで要素を「横並び」に配置したいとき、昔はfloatやinline-blockを使っていました。しかし現在では、Flexbox（フレックスボックス）が主流です。Flexboxを理解すれば、カードレイアウトやナビゲーションなどをシンプルなCSSだけで美しく整列できます。本記事では、初心者でも迷わないように、Flexboxの基本を段階的に学びましょう。

前提条件

  • HTMLとCSSの基本的な知識（タグやクラスが分かる程度）
  • コードエディタ（VS Codeなど）
  • 任意でブラウザの開発者ツールを使って動作確認ができる環境

ステップ1：Flexboxを有効にする

Flexboxは、親要素にdisplay: flex;を指定することで有効になります。

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
.container {
  display: flex; /* Flexboxを有効化 */
}
.item {
  background: #d0e7ff;
  padding: 16px;
  margin: 4px;
}

この状態で、3つのボックスが横並びになります。Flexboxの基本は「親がルールを決め、子がそれに従って並ぶ」構造です。

ステップ2：並び方を調整する（justify-content）

justify-contentプロパティで、要素の横方向の配置を調整できます。

.container {
  display: flex;
  justify-content: space-between; /* 両端揃え */
}
値意味
flex-start左寄せ（初期値）
center中央揃え
space-between両端に均等配置
space-around周囲に均等な余白
space-evenly要素間と外側に均等な間隔

ステップ3：縦方向の位置を調整する（align-items）

align-itemsは、縦方向の整列を制御します。

.container {
  display: flex;
  align-items: center; /* 縦方向中央揃え */
  height: 200px;
}
値意味
flex-start上寄せ
center中央揃え
flex-end下寄せ
stretch高さを自動調整して均等化

ステップ4：折り返しを設定する（flex-wrap）

要素が多い場合、1行に収まりきらないときは折り返すことができます。

.container {
  display: flex;
  flex-wrap: wrap; /* 折り返しを許可 */
}
.item {
  width: 30%;
}

これで、カード型レイアウトなどを自然に並べられます。

ベストプラクティス

  • Flexboxは**1次元レイアウト（横または縦）**に最適。複雑な2次元配置（縦×横）はGridの方が向いています。
  • 要素間の間隔はgapプロパティを使うとシンプルに設定できます。
.container {
  gap: 16px;
}
  • スマホ対応では、flex-direction: column;で縦並びに切り替えましょう。
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

よくある質問

Q. justify-contentとalign-itemsの違いは？
A. 横方向を揃えるのがjustify-content、縦方向を揃えるのがalign-itemsです。

Q. flex: 1ってよく見るけど何？
A. 要素の伸縮を指定するショートハンドです。flex: 1は「均等に幅を分ける」設定です。

Q. GridとFlexboxはどちらを使うべき？
A. 単純な横並びや中央寄せはFlexboxが向いており、複雑なレイアウトや段組にはGridが適しています。

まとめ

Flexboxは、**「横並びを簡単に」**実現できる強力なCSSレイアウト手法です。ポイントは次の3つです。

  1. display: flex;で有効化する。
  2. justify-contentで横方向を整える。
  3. align-itemsで縦方向を整える。

次のステップとして、Gridレイアウトを学ぶとさらに自由なデザインが可能になります。ぜひ、Flexboxを使って自分のポートフォリオサイトを整えてみましょう。