ベースラインとフレックス スタートの配置

フレキシブル レイアウトでは、フレックス スタートでは項目が交差軸の開始位置に配置され、ベースラインではアイテムが配置されます。コンテンツのベースラインに沿って配置します。

ベースラインAlignment

名前が示すように、ベースラインの位置合わせは、フレックス項目のベースライン、つまりほとんどの文字が配置される行を固定します。ベースラインと交差開始エッジの間の最大距離を持つアイテムは、そのエッジに対して同一平面上に配置されます。

視覚差

フレックス アイテムのフォント サイズが均一の場合または内容が同一である場合、フレックススタートとベースラインは交換可能に見える場合があります。ただし、アイテムのサイズが異なると、違いが生じます。

ベースラインの決定

行内で最も高いアイテムが、ベースライン配置のベースラインを決定します。

]例

次のコード スニペットを考えてみましょう:

.flex-container {
  align-items: baseline;
  ...
}
...
.flex-item {
  font-size: 2em;
  ...
}
...
.flex-item.item2 {
  font-size: 7em;
}

最大のフォント サイズ「B」を持つ項目が行のベースラインを決定します。他の項目は、下の図に示すように、「B」のベースラインに沿って配置されます。

[ベースライン配置を使用してさまざまな高さに配置されたフレックス項目の画像]

重要な注意事項

ベースライン キーワードはすべてのブラウザでサポートされているわけではありません。ブラウザ間の互換性を確保するには、align-items: flex-start を CSS3 のvertical-align プロパティと組み合わせて使用​​することを検討してください。