テキストベースラインに合わせたアイテム配置

Flexboxにおけるベースライン配置

align-items: baselineはフレックスアイテムを最初の行のテキストベースラインが同じ位置に来るように揃えます。異なるフォントサイズ、パディング、コンテンツ構造を持つアイテムのテキストを視覚的に揃えたい場合に重要です。

CSSコード

.container {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.item-large {
  font-size: 2rem;
  padding: 20px;
}

.item-small {
  font-size: 0.875rem;
  padding: 8px;
}

仕組み

上端（flex-start）、下端（flex-end）、中央（center）で揃える代わりに、ベースライン配置は各アイテムの最初の行のテキストベースラインを使用します。ブラウザは各アイテムのベースラインを識別し、すべてのベースラインが同じ水平線上に揃うように垂直方向にシフトします。

baselineと他の配置の比較

値	揃える基準
flex-start	アイテムの上端
flex-end	アイテムの下端
center	垂直方向の中心点
baseline	各アイテムの最初のテキストベースライン
stretch	交差軸を埋めるようにアイテムを引き伸ばす

ベースラインが重要な場面

ベースライン配置は以下を混在させる場合に特に重要です：

• 異なるフォントサイズの要素
• 異なるパディング量の要素
• フォームラベルと入力フィールド
• 異なるサイズの数字を持つ価格表示