Flexbox désactive la balise html break après la balise `</i>`?

Question

J'ai essayé d'insérer une balise <br /> pour casser la ligne après l'icône fontello et j'ai trouvé que c'est impossible quand div est stylé avec "display: flex". L'ajout d'espace blanc est également désactivé. L'ajout de nouvelles lignes après un caractère est possible, mais une nouvelle ligne commence sous la balise <i>. Pourquoi et comment résoudre ce problème? PS: J'ai remarqué que dans la situation de Chrome est mieux que dans Firefox, mais la nouvelle ligne commence toujours sous <i> tag. Exemple:

.with_flexbox{ 
 
display:flex; 
 
color:purple; 
 
}

<div class="with_flexbox red"> 
 
With flexbox I can't use &lt;br /&gt; tag right after <i>&lt;i&gt;</i><br /> tag 
 
</div> 
 
<div class="without_flexbox"> 
 
Without flexbox break after <i>&lt;i&gt;</i><br /> 
 
tag works fine. 
 
</div> 
 
<div class="with_flexbox"> 
 
White space is also disabled right after <i>&lt;i&gt;</i> tag. <br />And why this new line starts beneath &lt;i&gt; tag? 
 
</div>

Answer 1

Dans votre troisième contenu exemple de votre conteneur flexible sont divisés par <i> nœud en 3 éléments flex, vous obtenez 1 élément qui se compose de: White space is also disabled right after, deuxième élément <i><i></i> et troisième élément tag. <br> And why this new line starts beneath <i> tag?. Tout va bien, vous obtenez 3 nœuds affichés horizontalement, il y a un saut de ligne après le mot tag, comme vous l'avez écrit.

Le regroupement de fragments de texte en étiquettes distinctes n'a pas seulement un sens sémantique, mais vous aide également à maintenir votre code. Si vous voulez coller à flexbox, vous devez nommer chaque nœud séparément et utiliser flex-direction: column à la place des tags br, ou vous pouvez définir une base flexible pour les deux éléments et utiliser flex-wrap. Exemple d'extrait ci-joint.

.item { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 

 
    outline: 1px solid red; 
 
} 
 

 
.item__icon { 
 
    outline: 1px solid blue; 
 
} 
 

 
.item__intro { 
 
    outline: 1px solid green; 
 
} 
 

 
.item__description{ 
 
    outline: 1px solid yellow; 
 
}

<figure class="item"> 
 
<p class="item__intro">White space is also disabled right after</p> 
 
<i class="item__icon">&lt;i&gt;</i> 
 
<figcaption class="item__description">tag. <br />And why this new line starts beneath &lt;i&gt; tag?</figcaption> 
 
</div>