Evitar que os artigos flex de alongamento
Amostra:
div {
display: flex;
height: 200px;
background: tan;
}
span {
background: red;
}
<div>
<span>This is some text.</span>
</div>
-
Por que isso acontece basicamente com o
span
?
Qual é a abordagem correcta para evitar que se estique sem afectar outros artigos flex num recipiente flex?
1 answers
Você tem a possibilidade de afetar um ou mais itens flex para não esticar a altura total do recipiente.
para afetar todos os flex-itens do recipiente, escolha este:
Você tem que definir align-items: flex-start;
para div
e todos os flex-itens deste recipiente obter a altura do seu conteúdo.
div {
align-items: flex-start;
background: tan;
display: flex;
height: 200px;
}
span {
background: red;
}
<div>
<span>This is some text.</span>
</div>
para afectar apenas um único item flexível, Escolha Isto:
Se quiser desengatar um único item de flexão no recipiente, tem de colocar align-self: flex-start;
neste item de flexão. Todos os outros flex-itens do recipiente não são afetados.
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>
Porque é que isto está a acontecer ao span
?
O valor por omissão da propriedade align-items
é stretch
. Esta é a razão pela qual o span
preenche a altura do div
.
Diferença entre baseline
e flex-start
?
Se você tiver algum texto sobre os itens flex, com diferentes tamanhos de letra, você pode usar a linha de base da primeira linha para colocar o item flex verticalmente. Um flex-item com um tamanho de letra menor tem algum espaço entre o recipiente e ele mesmo no topo. Com flex-start
o flex-item será colocado no topo do recipiente (sem espaço).
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>