フレックススタートとベースラインアライメント: いつどちらを使用するべきですか?

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

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

ベースライン配置

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

視覚的差異

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

ベースラインの決定

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

例

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

.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 プロパティと組み合わせて使用​​することを検討してください。

以上がフレックススタートとベースラインアライメント: いつどちらを使用するべきですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。