【実務・中級編】Flexboxコンテナ内におけるインライン要素の配置と整列 – HTML実践ガイド

これが厄介なのは、ブラウザが「そのインライン要素の行の高さ（line-height）やベースラインをどう計算するか」を、Flexboxの整列アルゴリズムと複雑に絡めて決定するからです。

特に`align-items: baseline`を指定した時、テキストの「ベースライン（文字の足元）」を基準に揃えようとしますが、ここで`line-height`や`font-size`が混在していると、計算が期待値から乖離し、微細なズレが生じます。

実践：Flexboxでインライン要素を「ピクセル単位で制御する」コツ

現場でよくある「アイコン＋テキスト」のようなコンポーネントを例に、ハマりどころを回避する実装を見てみましょう。

.flex-container {
display: flex;
/ 垂直方向のセンター揃えは鉄板 /
align-items: center;
/ インライン要素間の余白はgapで管理するのが現代のベストプラクティス /
gap: 12px;

padding: 16px;
background: #f4f4f9;
}

.icon {
font-size: 1.5rem;
/ 匿名ボックスの挙動を安定させるため、line-heightを1にするのがコツ /
line-height: 1;
}

.label {
font-weight: 700;
/ 異なる要素が並ぶとき、垂直方向のズレを防ぐためflexアイテム化を意識する /
display: inline-flex;
align-items: center;
}

.code-tag {
background: #333;
color: #fff;
padding: 2px 6px;
border-radius: 4px;
/ code要素などはデフォルトのフォント設定でベースラインが狂いやすいので微調整 /
font-family: monospace;
}

このコードのポイント

1. `line-height: 1` の魔法: インライン要素特有の「フォントの上部や下部に生まれる余白（半行間）」を消し去ることで、Flexbox側での垂直整列が非常に予測しやすくなります。
2. `inline-flex` の活用: ``などのインライン要素の中にさらにアイコンを入れたい場合、その要素自体を`inline-flex`化することで、内部の要素を独立して整列させつつ、親のFlexコンテナのフローを乱さないようにできます。
3. `gap` プロパティの恩恵: 昔のように`margin-right`を最後の要素だけ打ち消すような無駄な処理は不要です。Flexboxの`gap`は、インライン要素を含む匿名ボックスに対しても正しく機能します。