Flexbox

やさしい説明

Flexbox（フレックスボックス）とは、要素を横並びや中央揃えにするCSSレイアウト方法です。

本棚に本を並べるイメージです。親要素（本棚）に display: flex を指定すると、子要素（本）が自動で横に並びます。

横方向の配置は justify-content、縦方向の配置は align-items で制御します。「上下左右ど真ん中」も簡単に実現できます。

1次元（横一列 or 縦一列）のレイアウトに向いています。格子状に並べたい場合はGridを使います。

図解：Flexboxの仕組み

具体例・使い方

/* 横並び＋中央揃え */
.nav {
  display: flex;
  justify-content: center; /* 横方向中央 */
  align-items: center;     /* 縦方向中央 */
  gap: 16px;               /* 要素間の隙間 */
}

/* 両端揃え（ロゴ左、メニュー右） */
.header {
  display: flex;
  justify-content: space-between;
}

いつ使う？

ナビゲーションメニューを横並びにするとき、要素を上下左右中央に配置するとき、カードを横に並べるときに使います。現代のWebレイアウトの基本です。

間違いやすいポイント

❌ 子要素にdisplay: flexを書いてしまう

/* ❌ 並べたい要素自体に書いても効かない */
.item { display: flex; }

/* ✅ 親要素に書く */
.container { display: flex; }

display: flex は「並べたい要素の親」に指定します。子要素自体ではありません。

よくある疑問

関連用語

• Grid
• レスポンシブ
• プロパティ

関連ブログ記事

• CSSフレックスボックス入門【初心者向けわかりやすい解説】

⚠️ 関連するエラー

• スマホで表示が小さい

❓ 関連するQ&A

• CSSを書いたのに画面が真っ白
• Flexboxで横並びにならない