Zapobiegać flex pozycji z rozciąganiem

Question

próbkę:

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

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

Mam dwa pytania, proszę:

1. Dlaczego w zasadzie stało z span?
2. Jakie jest właściwe podejście, aby zapobiec rozciągnięciu bez wpływu na inne elastyczne elementy w elastycznym pojemniku?

Answer 1

Nie chcesz rozciągnąć przęsła na wysokość?
Masz możliwość wpływania na jeden lub więcej elementów flex, aby nie rozciągnąć pełnej wysokości kontenera.

Aby mieć wpływ na wszystkie elementy giętkiego pojemnika, wybrać to:
Musisz ustawić align-items: flex-start; do div i wszystkie flex pozycje tego kontenera uzyskać wysokość ich treści.

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

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

Aby wpłynąć tylko jeden giętki element, wybierz to:
Jeśli chcesz unstretch jeden giętki element w kontenerze, trzeba ustawić align-self: flex-start; do tego artykułu flex. Nie ma to wpływu na wszystkie inne elementy flex kontenera.

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>

Dlaczego tak się dzieje do span?
Domyślna wartość właściwości align-items to stretch. To jest powód, dla którego span wypełnić wysokość div.

Różnica między baseline a flex-start?
Jeśli masz tekst na elementach flex, o różnych rozmiarach czcionki, możesz użyć linii bazowej pierwszego wiersza, aby umieścić element flex w pionie. Element flex z mniejszym rozmiarem czcionki ma trochę miejsca między kontenerem a samą górą. Przy flex-start element elastyczny zostanie ustawiony na górze kontenera (bez spacji).

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>