フレックスアイテムが伸びないようにする質問する

Question

スパンの高さを伸ばしたくないですか?
1 つ以上のフレックスアイテムに影響を与えて、コンテナーの高さ全体を伸ばさないようにすることができます。

コンテナ内のすべてのフレックスアイテムに影響を与えるには、以下を選択します。
align-items: flex-start;に設定するdivと、このコンテナーのすべてのフレックスアイテムがコンテンツの高さを取得します。

div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}

<div>
  <span>This is some text.</span>
</div>

単一のフレックスアイテムのみに影響を与えるには、以下を選択します。
コンテナ上の 1 つのフレックスアイテムを伸縮解除したい場合は、align-self: flex-start;このフレックスアイテムに設定する必要があります。コンテナの他のすべてのフレックスアイテムは影響を受けません。

div {
  display: flex;
  height: 200px;
  background: tan;
}
span.only {
  background: red;
  align-self:flex-start;
}
span {
    background:green;
}

<div>
  <span class="only">This is some text.</span>
  <span>This is more text.</span>
</div>

なぜこのようなことが起こるのでしょうかspan?
プロパティのデフォルト値align-itemsはです。これがの高さを埋めるstretch理由です。spandiv

baselineとの違いは何flex-startですか?
フレックスアイテムに異なるフォントサイズのテキストがある場合は、最初の行のベースラインを使用してフレックスアイテムを垂直に配置できます。フォントサイズの小さいフレックスアイテムは、上部にコンテナーとフレックスアイテム自体の間にいくらかのスペースがあります。flex-startフレックスアイテムはコンテナーの上部に設定されます (スペースなし)。

div {
  align-items: baseline;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}
span.fontsize {
  font-size:2em;
}

<div>
  <span class="fontsize">This is some text.</span>
  <span>This is more text.</span>
</div>

baselineとの違いに関する詳しい情報は、flex-start以下をご覧ください。
flex-start と baseline の違いは何ですか?

Answer 1