inline-flexの使い方

1. inline-flexとは？基本の意味と役割を理解しよう

検索意図：inline-flexの定義を知り、何ができるのか・どんな場面で使うのかを把握したい。
inline-flexは「要素自身はインライン要素のように振る舞い（行内で横に並ぶ）、その子要素はフレックスコンテナのルールで並べる」指定です。

• 親：行内に並ぶ（display:inline と同じ行内流に参加）。vertical-alignの影響を受けます。幅や高さも指定できます（inline-block同様）。
• 子：flexレイアウトの対象（flex-direction、justify-content、align-items などが有効）。
• 典型用途：アイコン＋テキスト、バッジ、タグ、ミニカードなど。

---

2. flexとの違い：inline-flexを使うべきシーンとは

検索意図：flexとの違いと、いつinline-flexを選ぶべきかを具体的に知りたい。

• display:flex
  • 要素自身はブロックレベル。行を独占しやすく、横幅は基本的に親幅いっぱい。
  • 使いどころ：セクションやナビ全体など。
• display:inline-flex
  • 要素自身はインラインレベル。隣の要素と同じ行に共存可能。
  • 使いどころ：ボタン内のアイコン＋テキスト、フォームラベル＋アイコンなど。

判断基準の目安

• 行内テキストの流れを壊さずに小さなUIを差し込みたい → inline-flex
• セクション単位で行ごと組み替えたい → flex

---

3. inline-flexの基本構文と指定方法

検索意図：すぐに使える最小コードと、主要プロパティのセットを知りたい。

.inlineFlex {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.inlineFlex--middle {
  vertical-align: middle;
}

<span class="inlineFlex inlineFlex--middle">
  <img src="icon.svg" alt="" width="16" height="16">
  <span>テキスト</span>
</span>

• flex-direction（横並び/縦積み）
• justify-content（主軸揃え）
• align-items（交差軸揃え）
• flex-wrap（折返し）
• gap（子同士の間隔）

---

4. inline-flexで要素を横並びにする実践例

<p>
  テキストの途中に
  <span class="pillList">
    <span class="pill">UI</span>
    <span class="pill">CSS</span>
    <span class="pill">Flexbox</span>
  </span>
  を差し込みます。
</p>

.pillList {
  display: inline-flex;
  gap: .4rem;
  vertical-align: baseline;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: .25em .6em;
  border: 1px solid #ddd;
  border-radius: 999px;
  font-size: .875rem;
  line-height: 1;
}

ポイント：
親にdisplay:inline-flexを指定するだけで、子はデフォルトで横並びになります。

---

5. アイコンとテキストを中央揃えにする方法

<a class="btnInline" href="#">
  <svg class="btnInline__icon" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M5 12h14M12 5l7 7-7 7"></path>
  </svg>
  <span class="btnInline__label">詳しく見る</span>
</a>

.btnInline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border-radius: .5rem;
  border: 1px solid #ddd;
  text-decoration: none;
  line-height: 1;
}

.btnInline__icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

.btnInline__label {
  white-space: nowrap;
}

補足：
行内ベースラインに合わせたい場合はvertical-align: middle;を利用します。

---

6. inline-flexを使う際の注意点とよくある失敗例

• 幅いっぱいに広がらない — 明示的にwidthを指定。
• 周囲テキストとの縦位置ズレ — vertical-align: middle;で修正。
• 複数行の折返し — flex-wrap: wrap;を指定。
• 余白にmarginを多用しない — gapを推奨。
• クリック領域が狭い — paddingで確保。
• 大規模レイアウトに乱用しない — flexやgridを使用。

---

7. まとめ：inline-flexでスマートにレイアウトを整える

• inline-flex＝行内で扱えるflexコンテナ。
• 使い所： アイコン＋テキスト、バッジ、インラインボタンなど。
• 基本セット： display:inline-flex; align-items:center; gap:…; vertical-align:middle;
• 注意点： 幅は自動で広がらない／縦位置調整／折返し／余白はgapが便利。

次の一歩（コピペ用スニペット）

.inlineFlex {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  vertical-align: middle;
}

<span class="inlineFlex">
  <img src="icon.svg" alt="" width="16" height="16">
  <span>テキスト</span>
</span>