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>

`

阅读 102
评论
    4 个回答
    • 913

    不用flex不就好了

      • 36

      给图片float:left

        • 1k

        把nickname和content包一个div就好了

        <div>
            <span class="nickname">{{item.name}}:</span>
            <span class="content">{{ item.message }}</span>
        </div>
        
          .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>
            撰写回答

            登录后参与交流、获取后续更新提醒