📦 Flexbox でレイアウトが崩れる

😰 こんな症状

justify-content や align-items を書いたのに、要素が横並びにならない。

🔍 原因

display: flex を子要素ではなく親要素に書く必要があるのに、子要素に書いてしまっている。

❌ エラーが起きるコード

.child { display: flex; }
/* 子要素に flex を付けている */

✅ 直し方

横並びにしたい要素を囲む親要素に display: flex; を書く。

✅ 修正後のコード

.parent { display: flex; justify-content: center; }
/* 親要素に付ける */

🔗 関連するエラー

• スタイルが特定の要素に当たらない — セレクタ名のタイポ
• 余白がおかしい — margin と padding の混同
• 幅を指定したのにはみ出す — box-sizing が content-box のまま
• スマホで表示が小さい — viewport meta タグがない
• z-index が効かない — position が設定されていない

📖 この問題を学べるレッスン

CSSコースで基礎から学ぶ →

📝 関連ブログ記事

• プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説

📖 関連する用語

• セレクタ
• プロパティ
• 値
• クラス
• ID

❓ 関連するQ&A

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