[解決済み] フレックスアイテムの伸びを防ぐ

質問

サンプルです。

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}

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

2点ほど質問をさせてください。

1. なぜ基本的に span ?
2. フレックスコンテナ内の他のフレックスアイテムに影響を与えずに伸びるのを防ぐには、どのような方法が適切でしょうか？

どのように解決するのですか？

スパンの高さを伸ばしたくないのですか？

コンテナの高さを完全に伸ばさないように、1つまたは複数のflex-itemに影響を与える可能性があります。

コンテナのすべてのフレックスアイテムに影響を与えるには、これを選択します。

を設定する必要があります。 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>

単一のフレックスアイテムにのみ影響を与えるには、これを選択します。

コンテナ上の単一のフレックスアイテムの伸縮を解除したい場合は、以下のように 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 . このため span の高さを埋める div .

の違い 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の違いは何ですか？