web-dev-qa-db-fra.com

Empêcher les articles flexibles de s'étirer

Échantillon:

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}
<div>
  <span>This is some text.</span>
</div>

J'ai deux questions, s'il vous plaît:

  1. Pourquoi cela arrive-t-il à la span?
  2. Quelle est la bonne approche pour l'empêcher de s'étirer sans affecter les autres éléments flexibles d'un conteneur flexible?
htmlcssflexbox
52
Mori

Vous ne voulez pas étirer la portée en hauteur?
Vous avez la possibilité d’affecter un ou plusieurs articles flexibles pour ne pas étirer toute la hauteur du conteneur.

Pour affecter tous les éléments flex du conteneur, choisissez ceci:
Vous devez définir align-items: flex-start; à div et tous les éléments flex de ce conteneur obtiennent la hauteur de leur contenu.

div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}
<div>
  <span>This is some text.</span>
</div>

Pour n'affecter qu'un seul élément flex, choisissez ceci:
Si vous souhaitez retirer un seul élément flex sur le conteneur, vous devez définir align-self: flex-start; à ce flex-item. Tous les autres éléments flex du conteneur ne sont pas affectés.

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>

Pourquoi cela arrive-t-il à la span?
La valeur par défaut de la propriété align-items est stretch. C'est la raison pour laquelle le span remplit la hauteur du div.

Différence entre baseline et flex-start?
Si vous avez du texte sur les éléments flex, avec des tailles de police différentes, vous pouvez utiliser la ligne de base de la première ligne pour placer l’élément flex verticalement. Un élément flex avec une taille de police plus petite a un espace entre le conteneur et lui-même en haut. Avec flex-start l'élément flex sera placé en haut du conteneur (sans espace).

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>

Vous pouvez trouver plus d’informations sur la différence entre baseline et flex-start ici:
Quelle est la différence entre flex-start et baseline?

94
Sebastian Brosch