フレックスボックスの配置: 「flex-start」と「baseline」の違いは何ですか?

Flexbox での Flex-Start とベースラインの配置

CSS Flexbox の align-self プロパティを使用する場合、flex-start の違いを理解するそしてベースラインが重要です。最初は同じ結果が生成されるように見えますが、特定のシナリオでは異なる動作を示します。

Flex-Start Alignment

flex-start は、フレックス項目を開始位置に配置します。フレックスコンテナの交差軸の端。通常、これは水平方向の場合は上、垂直方向の場合は左です。

ベースラインの配置

ベースラインは、フレックス項目をコンテンツのベースラインに沿って配置します。ベースラインは、ほとんどの文字が置かれ、その下にディセンダーが伸びる目に見えない線です。

相違点

フレックス項目のフォント サイズと内容が一貫している場合、 flex-start とベースラインは同様の結果を生成します。ただし、これらの要因が変化すると、ベースラインの配置がより明確になります。

ベースラインの配置を使用する場合、行内の最も高い項目によってベースラインの位置が決まります。 Flex アイテムは、ベースラインが揃うように配置され、開始マージン エッジから最も遠いアイテムがそのエッジに対して同一平面上に配置されます。

例

次のコードを考えてみましょう。 :

.flex-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.flex-item {
  background-color: green;
  width: 110px;
  min-height: 100px;
  padding: 5px;
  text-align: center;
}

このコードでは、フレックス項目はベースラインを使用して位置合わせされます。次の出力が生成されます。

<div class="flex-container">
  <div class="flex-item">A</div>
  <div class="flex-item">B</div>
  <div class="flex-item">C</div>
  <div class="flex-item">D</div>
  <div class="flex-item">E</div>
</div>

フレックス項目のコンテンツのサイズは異なりますが、それらはすべてベースラインに沿って配置されていることに注意してください。

以上がフレックスボックスの配置: 「flex-start」と「baseline」の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。