フレックススタートとベースラインの違いは何ですか？

debugcn 投稿 Dev

Zameer Ansari：

flex align- *プロパティを使用する場合、flex-startとの違いは何baselineですか？

以下のコードスニペットは、align-self: flex-startおよびと同じ出力を提供しalign-self: baselineます。

どのような場合にalign-self: flex-start、align-self: baseline動作が異なりますか？

.flex-container {
  color: white;
  display: -webkit-flex;
  display: flex;
  width: 350px;
  height: 200px;
  background-color: yellow;
}
.flex-item {
  background-color: green;
  width: 50px;
  min-height: 100px;
  margin: 10px;
}
.item1 {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.item2 {
  -webkit-align-self: flex-end;
  align-self: flex-end;
}
.item3 {
  -webkit-align-self: center;
  align-self: center;
}
.item4 {
  -webkit-align-self: baseline;
  align-self: baseline;
}
.item5 {
  -webkit-align-self: stretch;
  align-self: stretch;
}

<div class="flex-container">
  <div class="flex-item item1">flex-start</div>
  <div class="flex-item item4">baseline</div>
  <div class="flex-item item2">flex-end</div>
  <div class="flex-item item3">center</div>
  <div class="flex-item item5">stretch</div>
</div>

マイケル・ベンジャミン：

次の2つの画像を参照してください。align-itemsルールを除いて、コードはどちらも同じです。

`align-items: flex-start`

`align-items: baseline`

align-itemsまたはを使用する場合align-self、flex-start値はフレックスコンテナーの交差軸の開始エッジでフレックスアイテムを揃えます。

このbaseline値は、フレックスアイテムをコンテンツのベースラインに沿って配置します。

ベースライン

ほとんどの文字が「座る」線とその下に下降線が伸びる線。

^{出典：Wikipedia.org}

多くの場合、ときにフォントサイズは、（問題のような）項目のうち同一である、またはコンテンツは、次いで、そうでなければ同じであるflex-startとbaseline区別できないであろう。

ただし、コンテンツのサイズがフレックスアイテム間で異なる場合baselineは、顕著な違いが生じる可能性があります。

ベースラインアライメントが発生する場所に関しては、行の最も高いアイテムによって決定されます。

スペックから：

8.3。軸間整列：align-itemsおよびalign-selfプロパティ

baseline

フレックスアイテムはベースラインアライメントに参加します。ラインに参加しているすべてのフレックスアイテムは、ベースラインが整列するように整列され、ベースラインとそのクロススタートマージンエッジとの距離が最大のアイテムは、この線。

.flex-container {
  color: white;
  display: flex;
  height: 300px;
  background-color: yellow;
  justify-content: space-between;
  align-items: baseline;
}
.flex-item {
  background-color: green;
  width: 110px;
  min-height: 100px;
  margin: 10px;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
}
.item1 {  font-size: 2em;  }
.item2 {  font-size: 7em;  }
.item3 {  font-size: .5em; }
.item4 {  font-size: 3em;  }
.item5 {  font-size: 10em; }

/*
.item1 {  align-self: flex-start; }
.item2 {  align-self: flex-end; }
.item3 {  align-self: center; }
.item4 {  align-self: baseline; }
.item5 {  align-self: stretch; }
*/

#dashed-line {
  border: 1px dashed red;
  position: absolute;
  width: 100%;
  top: 170px;
}

<div class="flex-container">
  <div class="flex-item item1">A</div>
  <div class="flex-item item2">B</div>
  <div class="flex-item item3">C</div>
  <div class="flex-item item4">D</div>
  <div class="flex-item item5">E</div>
</div>

<div id="dashed-line"></div>