Flexbox отключает тег html break после тега `</ i>`?

Question

Я пытался вставить <br /> пометил разрыв строки после значка fontello и обнаружил, что это невозможно, когда div оформлен в стиле "display:flex". Добавление пробелов также отключено. Добавление новых строк после некоторого символа возможно, но новая строка начинается ниже <i> тег. Почему и как это исправить? PS: я заметил, что в Chrome ситуация лучше, чем в Firefox, но новая строка все еще начинается ниже <i> тег. Пример:

.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

В третьем примере содержимое вашего flex-контейнера разделено на <i> Узел в 3 гибких элемента, вы получаете 1 элемент, который состоит из: White space is also disabled right after второй пункт <i><i></i> и третий пункт tag. <br> And why this new line starts beneath <i> tag?, Все выглядит хорошо, вы получаете 3 узла, отображаемых горизонтально, после слова разрыва строки, как вы написали.

Заключение фрагментов текста в отдельные теги не только имеет смысл, но и помогает поддерживать ваш код.

Если вы хотите придерживаться flexbox, вы должны назвать каждый узел отдельно и использовать flex-direction: column вместо тегов br, или вы можете установить гибкую основу для обоих элементов и использовать flex-wrap. Пример фрагмента прилагается ниже.

.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>