Flexbox入門：Webデザインを効率化するレイアウト術

1. はじめに

• Flexboxとは？
  • CSSの「Flexible Box Layout Module」の略。
  • 柔軟で効率的なレイアウトを作成するためのレイアウトモデル。
• Flexboxを使うメリット
  • 複雑なレイアウトが簡単に実現できる。
  • レスポンシブデザインとの相性が良い。
  • 要素の中央揃えや整列が容易。

🧠 2. Flexboxの基本概念

• FlexコンテナとFlexアイテム
  • 親要素：display: flex; → Flexコンテナ
  • 子要素：Flexアイテム

例：Flexコンテナの基本設定

.container {
  display: flex;
  border: 1px solid #ccc;
}

.item {
  background: lightblue;
  padding: 10px;
  margin: 5px;
}

• 主軸（Main Axis）と交差軸（Cross Axis）
  • 主軸：要素が配置される主な軸（flex-directionで決定）
  • 交差軸：主軸に対して垂直方向の軸

🛠️ 3. Flexboxの主要プロパティ

① 親要素（Flexコンテナ）向けプロパティ

• flex-direction：アイテムの配置方向を設定cssコードをコピーする.container { flex-direction: row; /* 横並び */ flex-direction: column; /* 縦並び */ }
• justify-content：主軸方向の配置cssコードをコピーする.container { justify-content: center; /* 中央揃え */ justify-content: space-between; /* 両端揃え */ }
• align-items：交差軸方向の配置cssコードをコピーする.container { align-items: center; /* 縦中央揃え */ }

② 子要素（Flexアイテム）向けプロパティ

• flex-grow：要素の拡張cssコードをコピーする.item { flex-grow: 1; /* 余白を均等に拡張 */ }
• flex-shrink：要素の縮小cssコードをコピーする.item { flex-shrink: 0; /* 縮小しない */ }
• align-self：個別要素の配置cssコードをコピーする.item { align-self: flex-end; /* 下揃え */ }

📐 4. 実践：Flexboxを使ったレイアウト例

① ナビゲーションバー

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

HTML

<div class="nav">
  <div>Logo</div>
  <div>Menu</div>
</div>

② カードレイアウト

.container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap; /* 折り返し */
}

.item {
  flex: 1 1 calc(33.333% - 10px);
  background: lightcoral;
  text-align: center;
  padding: 20px;
}

📱 5. レスポンシブデザインとの連携

• flex-wrap：要素を折り返すcssコードをコピーする.container { flex-wrap: wrap; }
• メディアクエリとの組み合わせcssコードをコピーする@media (max-width: 768px) { .container { flex-direction: column; } }

🐞 6. よくあるエラーと解決策

• 要素が中央揃えされない
  → justify-content と align-items の確認
• アイテムのサイズが揃わない
  → flex-grow と flex-basis の設定

🚀 7. Flexboxの応用テクニック

• ネガティブマージンを活用したデザイン
• FlexboxとGridの組み合わせ
• アニメーションと組み合わせる

🎓 8. まとめ

• Flexboxは効率的なレイアウト設計に最適
• 主要プロパティを理解し、適切に使い分けることが重要
• 練習と実践でFlexboxの感覚を掴もう

📚 9. 参考資料・リソース

• MDN Web Docs – Flexbox
• CSS Tricks – A Complete Guide to Flexbox