Impedire articoli flex da stiramento

Question

Esempio:

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

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

ho due domande, per favore:

1. Perché accade essenzialmente al span?
2. Qual è l'approccio corretto per evitare che si estenda senza influire su altri articoli flessibili in un contenitore flessibile?

Answer 1

Non si desidera allungare lo span in altezza?
Si ha la possibilità di influenzare uno o più elementi flessibili per non allungare l'intera altezza del contenitore.

di influenzare tutti gli flex-elementi del contenitore, scegliere questa:
È necessario impostare align-items: flex-start;-div e tutti flex-oggetti di questo contenitore ottiene l'altezza del loro contenuto.

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

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

a colpire un singolo flex-voce, scegliere questa:
Se si vuole Unstretch un unico flex-punto all'ordine del contenitore, è necessario impostare align-self: flex-start; a questo articolo flessibile. Tutti gli altri articoli flessibili del contenitore non sono interessati.

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>

Perché questo accada al span?
Il valore predefinito della proprietà align-items è stretch. Questo è il motivo per cui lo span riempie l'altezza dello div.

Differenza tra baseline e flex-start?
Se si dispone di testo sugli elementi flessibili, con dimensioni carattere diverse, è possibile utilizzare la linea di base della prima linea per posizionare l'elemento flessibile verticalmente. Un elemento flessibile con una dimensione del carattere più piccola ha uno spazio tra il contenitore e se stesso in cima. Con flex-start l'elemento flessibile verrà impostato nella parte superiore del contenitore (senza spazio).

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>