3
votes

Qu'est-ce qui cause la différence de largeur d'un élément flex et d'un élément de bloc en ligne?

Voir ce violon:

La seule différence entre les deux éléments:

.label1
{
  display: inline-block;
}

.label2
{
  display: flex;
}

Les deux libellés sont donc identiques sauf que l'un est réglé sur inline-block et l'autre sur flex. Pourquoi ont-ils une largeur différente? Pourquoi l'un dépasse-t-il son conteneur et l'autre pas?

html css flexbox

3 commentaires

Quelqu'un a essayé de supprimer le lien vers jsfiddle. S'il vous plaît ne faites pas cela. C'est celui-ci qui est beaucoup plus clair à voir et à travailler dans un violon.

Il est préférable de l'inclure dans un extrait de code. Si le lien violon meurt, la question perd des informations.

Parfois, il est utile d'utiliser des transitions pour comprendre ce qui se passe. J'ai pris la liberté de bifurquer votre violon et d'ajouter une transition qui change la largeur du div encapsulant. Découvrez-le ici: jsfiddle.net/x6prc01w - passez la souris sur le div gris pour le regarder en jeu. Modifiez les styles des autres éléments et ajoutez un flotteur à la travée supérieure. Je ne vois aucun bogue ou erreur dans votre violon. Tout est rendu comme prévu.

3 Réponses :

2
votes

Vous stylisez des éléments span avec display: inline-block . Par défaut, les éléments de niveau bloc ont 100% de la largeur de leur conteneur parent. Lorsque vous forcez l'entrée et l'étendue sur la même ligne avec white-space: nowrap , cela force l'étendue à sortir de la limite du conteneur parent.

Pourquoi ont-ils une largeur différente? Pourquoi l'un dépasse-t-il son conteneur et l'autre pas?

L'utilisation de display: flex permet aux éléments enfants de se rétrécir pour s'adapter à l'espace disponible afin que l'élément span commence par la largeur à 100% de son parent, puis se rétrécit pour remplir l'espace disponible à la place.

2 commentaires

dois-je également dire que vous avez modifié votre réponse pour inclure des informations provenant de la mienne ? ;)

"Par défaut, les éléments de niveau bloc ont 100% de la largeur de leur conteneur parent." - cela expliquerait. Mais ce n'est pas toujours le cas. Vérifiez ce violon pour un exemple de compteur: jsfiddle.net/7osrmkph

1
votes

La principale différence que j'ai observée est qu'avec un inline-block, il remplira votre div parent avec vos éléments inline-block quel que soit le nombre d'éléments dans votre div parent, mais avec display: flex divisera la largeur (ou hauteur) de votre div parent par le nombre d'éléments que vous avez.

De plus, dans votre violon, vous avez déjà défini inline-block pour le span, essayez simplement de le supprimer et vous verrez la différence d'une manière plus visuelle

0 commentaires

1
votes

C'est à cause de l ' espace blanc: nowrap .

Sans vous aurez ceci qui est un résultat attendu:

<div class="box">
  <span>lorem ipsume</span>
  <span> lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume</span>
  <span> lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume</span>
</div>

<div class="box" style="white-space:nowrap">
  <span>lorem ipsume</span>
  <span> lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume</span>
  <span> lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume</span>
</div>

.box {
  width:200px;
  border:2px solid red;
}
.box span {
  border:2px solid green;
  white-space:normal;
  display:inline-block;
  vertical-align:top;
}

Notez comment le inline-block a sa largeur égale à celle du conteneur car il y a beaucoup de texte et il se cassera donc c'est comme avoir une largeur: 100% . Ensuite, si vous ajoutez white-space: nowrap , vous allez simplement désactiver l'habillage et déplacer ce inline-block vers le haut en gardant sa largeur et vous allez créer le débordement ¹

<div>

  <label class=label1>
 <input type=checkbox>
 <span>
  Here is a long description for the option that is set via the checkbox
  on the left. The label is set to inline-block. For some reason,
  it overflows the containing div. But why?
</span>
</label>

  <label class=label2>
 <input type=checkbox>
 <span style="flex-shrink:0">
  Here is a long description for the option that is set via the checkbox
  on the left. The label is set to flex. For some reason,
  it does not overflow the containing div. But why not?
</span>
</label>

</div>

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background: #f0f0f0;
}

span {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}

label {
  margin-top: 10px;
  white-space: nowrap;
}

.label1 {
  display: inline-block;
}

.label2 {
  display: flex;
}

Pour la flexbox, c'est différent car le wrap est contrôlé par flex-wrap qui est par défaut nowrap . Notez que le inline-block à l'intérieur du conteneur flexbox est inutile car l'élément sera bloqué quand il deviendra un élément flexible.

Activez le wrapping et vous aurez un comportement similaire au premier exemple:

<div>

  <label class=label1>
 <input type=checkbox>
 <span>
  Here is a long description for the option that is set via the checkbox
  on the left. The label is set to inline-block. For some reason,
  it overflows the containing div. But why?
</span>
</label>

  <label class=label2>
 <input type=checkbox>
 <span style="width:200px;flex-shrink:0">
  Here is a long description for the option that is set via the checkbox
  on the left. The label is set to flex. For some reason,
  it does not overflow the containing div. But why not?
</span>
</label>

</div>

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background: #f0f0f0;
}

span {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}

label {
  margin-top: 10px;
  white-space: nowrap;
}

.label1 {
  display: inline-block;
}

.label2 {
  display: flex;
}

Maintenant, rajoutez le nowrap de l'espace blanc:

<div>

  <label class=label1>
 <input type=checkbox>
 <span>
  Here is a long description for the option that is set via the checkbox
  on the left. The label is set to inline-block. For some reason,
  it overflows the containing div. But why?
</span>
</label>

  <label class=label2>
 <input type=checkbox>
 <span style="width:200px;">
  Here is a long description for the option that is set via the checkbox
  on the left. The label is set to flex. For some reason,
  it does not overflow the containing div. But why not?
</span>
</label>

</div>

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background: #f0f0f0;
}

span {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}

label {
  margin-top: 10px;
  white-space: nowrap;
}

.label1 {
  display: inline-block;
}

.label2 {
  display: flex;
}

Rien ne se passera avec la flexbox car nous ne traitons plus de texte et d'élément en ligne mais il s'agit d'éléments flexibles donc l'espace blanc n'a aucun effet là-bas car ils sont des éléments de bloc et comme indiqué ci-dessus, le wrapping est contrôlé par flex-wrap.

Une autre chose à noter est que les éléments flex seront par défaut toujours rétrécis pour s'adapter à leur conteneur parent, ce qui explique également pourquoi pas de dépassement même si vous définissez une largeur explicite:

<div>

  <label class=label1>
 <input type=checkbox>
 <span>
  Here is a long description for the option that is set via the checkbox
  on the left. The label is set to inline-block. For some reason,
  it overflows the containing div. But why?
</span>
</label>

  <label class=label2>
 <input type=checkbox>
 <span>
  Here is a long description for the option that is set via the checkbox
  on the left. The label is set to flex. For some reason,
  it does not overflow the containing div. But why not?
</span>
</label>

</div>

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background: #f0f0f0;
}

span {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}

label {
  margin-top: 10px;
  white-space: nowrap;
}

.label1 {
  display: inline-block;
}

.label2 {
  display: flex;
  flex-wrap:wrap;
}

Mais si vous désactivez le shrink vous pouvez avoir un débordement:

<div>

  <label class=label1>
 <input type=checkbox>
 <span>
  Here is a long description for the option that is set via the checkbox
  on the left. The label is set to inline-block. For some reason,
  it overflows the containing div. But why?
</span>
</label>

  <label class=label2>
 <input type=checkbox>
 <span>
  Here is a long description for the option that is set via the checkbox
  on the left. The label is set to flex. For some reason,
  it does not overflow the containing div. But why not?
</span>
</label>

</div>

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background: #f0f0f0;
}

span {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}

label {
  margin-top: 10px;
  /*white-space: nowrap;*/
}

.label1 {
  display: inline-block;
}

.label2 {
  display: flex;
  flex-wrap:wrap;
}

Et sans largeur explicite, vous aurez ceci:

<div>

  <label class=label1>
 <input type=checkbox>
 <span>
  Here is a long description for the option that is set via the checkbox
  on the left. The label is set to inline-block. For some reason,
  it overflows the containing div. But why?
</span>
</label>


</div>

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background: #f0f0f0;
}

span {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}

label {
  margin-top: 10px;
  white-space: nowrap;
}

.label1 {
  display: inline-block;
}

.label2 {
  display: flex;
}

¹ voici un autre exemple pour illustrer l'effet de l ' espace blanc: nowrap et comment il ne change la largeur de l'élément calculée avant:

<div>

  <label class=label1>
 <input type=checkbox>
 <span>
  Here is a long description for the option that is set via the checkbox
  on the left. The label is set to inline-block. For some reason,
  it overflows the containing div. But why?
</span>
</label>


</div>

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background: #f0f0f0;
}

span {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}

label {
  margin-top: 10px;
  /*white-space: nowrap;*/
}

.label1 {
  display: inline-block;
}

.label2 {
  display: flex;
}

5 commentaires

Je suppose que OP a l'intention que le texte de l'étiquette soit à côté de la case à cocher, comme dans l'exemple display: flex . Votre «solution» brise cela.

@JamesCoyle solution ? J'explique ne pas fournir de solution;)

Vous n'avez pas expliqué pourquoi le débordement se produit réellement. Vous avez fourni une solution pour arrêter le débordement et cela n'a rien à voir avec flex-wrap car flexbox n'encapsule rien. Et maintenant, vous modifiez votre réponse pour fournir des informations à partir de ma réponse.

@JamesCoyle qu'est-ce qui n'est pas clair dans le premier paragraphe qui explique le débordement? J'ai également ajouté un texte blod pour expliquer pourquoi cela se produit

@JamesCoyle et quelles informations j'ai copiées de votre réponse? S'il s'agit de la dernière phrase, j'ai déjà fourni une ancienne réponse ( stackoverflow.com/a/49492522/8620333 ) expliquant l'effet de rétrécissement donc je connais simplement cette information comme vous le faites.