• HOME
  • web
  • display: block、inline-block、flex の違いや使い分け

display: block、inline-block、flex の違いや使い分け

🧱 1. display: block

  • 特徴：縦に並ぶ。幅は親の幅いっぱい。
  • 例：<div>, <p>, <h1> など
  • 使いどころ：セクションや段落など、大きなまとまり

🧩 2. display: inline-block

  • 特徴：横に並ぶけど、幅や高さを指定できる。
  • 例：ボタン、メニュー、アイコンなど
  • 注意点：自動で折り返したりはしない。画面がせまくなっても縦にはならない。

📦 3. display: flex

  • 特徴：中の要素を自由に並べられる。横並び・縦並び・折り返しもOK！
  • よく使うオプション：
    • flex-wrap: wrap; → はみ出したら自動で折り返す
    • justify-content → 横方向の並び方
    • align-items → 縦方向のそろえ方
  • 使いどころ：レスポンシブ対応、複雑なレイアウト、ボタンやカードの並びなど

💡 まとめ表

特徴／プロパティblockinline-blockflex
横に並ぶ？×○○
幅・高さ指定できる？○○○
自動で折り返す？××○（flex-wrap）
レイアウトの自由度△△◎
メディアクエリ必要？○○△（なくても柔軟）

✅ どれを使えばいい？

  • シンプルに縦に並べたい → block
  • 横に並べたいけど、サイズも調整したい → inline-block
  • 横並び＋折り返し＋レスポンシブ対応したい → flex