display-flex 如何达到我预期的换行

Question

这是我的代码 我想达到最后一行换行 顶到头 不想留白
`

      <div
        class="normalBarrage"
      
      >

        <img
          class="avatar"
          :src="item.avatar"
          alt=""
        >

        <span class="nickname">{{item.name}}:</span>
         <span class="content">{{ item.message }}</span>
      </div>

`

Answer 1

不用flex不就好了

Answer 2

给图片float:left

Answer 3

把nickname和content包一个div就好了

<div>
    <span class="nickname">{{item.name}}:</span>
    <span class="content">{{ item.message }}</span>
</div>

Answer 4

.normalBarrage{
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

<div
        class="normalBarrage"
      
      >

        <div class="left">
          <img
          class="avatar"
          src="avatar.png"
          alt=""
        >

        <span class="nickname">猪巴结:</span>
        </div>
         <div class="right">
          <span class="content">这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</span>
         </div>
      </div>