帶中斷標籤的顯示器Flex

Question

我正在開發一個富文本框。尚未開發爲可編輯的DOM。已陷入初始階段。我已經提到它是一個Flex元素。在cmd+enter我將添加一個<br>標籤。我有一個<a>標記作爲Flex元素的直接子元素。添加<a>標籤使該元素脫離對齊。如何使<a>元素對齊（應該一個接一個對齊）。如果我添加一個額外的div我得到它修復。請參閱下

.my-inline-element { 
 
    border: 2px solid red; 
 
    display: flex; 
 
    height:100px; 
 
}

<div class="my-inline-element"> 
 
    <div class="extraDiv"> 
 
     item 
 
     <br> 
 
     <a href="3">Item2</a> 
 
     <br> 
 
     sample3 
 
     <br> 
 
     sample4 
 
     <br> 
 
    </div> 
 
</div>

在與extraDiv類去除DOM使對準嘈雜。請參閱下

.my-inline-element { 
 
    border: 2px solid red; 
 
    display: flex; 
 
    height:100px; 
 
}

<div class="my-inline-element"> 
 
     item 
 
     <br> 
 
     <a href="3">Item2</a> 
 
     <br> 
 
     sample3 
 
     <br> 
 
     sample4 
 
     <br> 
 
</div>

是否有任何可能性，以實現無添加extraDiv。此外，我要刪除

Answer 1

.my-inline-element { 
    border: 2px solid red; 
    display: flex; 
    height:100px; 
    flex-direction: column nowrap; 
} 

點擊here

Answer 2

By adding another CSS class to your parent DIV or mentioned the child element as display:block will help to sort out your issue, Lets 

給一個嘗試...

https://jsfiddle.net/jk2sy1f0/ 

> .my-inline-element { border: 2px solid red; display: flex; 
> height:100px; } 
> 
> .lineBreak{ 
>  display:block; } 
> 
> <div class="my-inline-element lineBreak"> item <br> <a 
> href="3">Item2</a> <br>sample3 <br>sample4 <br> </div> 
>