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

image.png

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


      <div
        class="normalBarrage"
      
      >

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

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

`

阅读 111
评论
    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>