Esnek parçaların esnemesini önleyin

Örneklem:

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

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

İki sorum var, lütfen:

1. Neden temelde başınıza geliyor span?
2. Esnek bir kaptaki diğer esnek öğeleri etkilemeden gerilmesini önlemek için doğru yaklaşım nedir?

Yüksekliği uzatmak istemiyor musun?
Kabın tüm yüksekliğini uzatmamak için bir veya daha fazla esnek öğeyi etkileme olanağına sahipsiniz.

Konteynırın tüm flex öğelerini etkilemek için şunu seçin: Bu konteynırın tüm flex öğelerini
ayarlamanızalign-items: flex-start;gerekirdivve içeriklerinin yüksekliğini alırsınız.

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

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

Yalnızca tek bir esnek öğeyi etkilemek için şunu seçin:
Kaptaki tek bir esnek öğeyi uzatmak istiyorsanız,align-self: flex-start;bu esnek öğeyiayarlamanızgerekir. Kabın diğer tüm esnek öğeleri etkilenmez.

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>

Bu neden oluyor span?
Özelliğinin varsayılan değeri align-itemsolduğu stretch. spanYüksekliğin doldurulmasının nedeni budur div.

Arasındaki fark baselineve flex-start?
Esnek öğeler üzerinde farklı yazı tipi boyutlarına sahip bazı metinleriniz varsa, esnek öğeyi dikey olarak yerleştirmek için ilk satırın taban çizgisini kullanabilirsiniz. Daha küçük yazı tipi boyutuna sahip bir esnek öğenin, kap ile kendisi arasında üstte biraz boşluk vardır. İle flex-startesnek maddelik (boşluksuz) kabın üstüne ayarlanacaktır.

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>

Arasındaki farkla ilgili daha fazla bilgi bulabilirsiniz baselineve flex-start: burada
esnek-başlangıç ve baz hattı arasındaki fark nedir?