Flexbox는 '</i>'태그 다음에 HTML 중단 태그를 비활성화합니까?

Question

fontello 아이콘 다음에 줄을 끊으려고 <br /> 태그를 삽입하려했는데 div가 "display : flex"로 스타일을 지정하면 불가능하다는 것을 알았습니다. 공백 추가도 사용 불가능합니다. 일부 문자 뒤에 새로운 줄을 추가 할 수 있지만, 새 줄은 <i> 태그 아래에서 시작됩니다. 왜 그리고 어떻게 수정해야합니까? 추신 : 크롬 상황이 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

이 3 개 플렉스 항목에 <i> 노드 분할, 당신은 구성 1 개 항목 수 : White space is also disabled right after, 두 번째 항목 <i><i></i> 및 세 번째 항목 tag. <br> And why this new line starts beneath <i> tag?. 모든 것이 잘 보입니다. 3 개의 노드가 가로로 표시되고, 단어 태그 다음에 줄 바꿈이 있습니다. 작성한 것처럼 말입니다.

텍스트 조각을 별도의 태그로 묶는 것은 의미 론적 일뿐만 아니라 코드 유지 관리에도 도움이됩니다.

flexbox를 사용하려면 각 노드를 별도로 지정하고 br 태그 대신 flex-direction: column을 사용하거나 두 요소 모두에 플렉스 기반을 설정하고 플렉스 랩을 사용해야합니다. 아래에 첨부 된 스 니펫 예제. 은``태그는 플렉스 항목이됩니다 그래서 익명 플렉스 항목으로, 앞과 뒤에 텍스트를한다는 것을 여기에 어떻게됩니까

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