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

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

Flex-Start Alignment

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

ベースラインの配置

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

相違点

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

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

Example

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

.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;
}

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

  
A
  
B
  
C
  
D
  
E

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