带中断标签的显示器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> 
>