は

Question

サンプルを延伸することからフレックス項目を防ぐ

1. は、なぜそれが基本的にspanに起こるのでしょうか？
2. フレックスコンテナ内の他のフレックスアイテムに影響を与えずにストレッチを防止する正しいアプローチは何ですか？

Answer 1

スパンを高さに伸ばしたくないですか？
コンテナの高さを伸ばさないように、1つまたは複数のフレックスアイテムに影響を与える可能性があります。

がコンテナのすべてのフレックスの項目に影響を与えるために、これを選択：
あなたは divから align-items: flex-start;を設定しなければならず、このコンテナのすべてのフレックスのアイテムは、その内容の高さを取得します。

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

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

は、単一のフレックス項目に影響を与えるために、これを選択：
を使用すると、コンテナに単一フレックスアイテムをunstretchしたい場合は、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です。これは、が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>