Flexbox 将最后一项放在下一行

Question

我有一个容器

#test {
  display:flex;
  flex-direction:row;
}

p { 

 margin-left:3px;
}

<div id = "test">

<p> 1 </p>
<p> 1 </p>
<p> 1 </p>

</div>

如何将最后一个元素发送到下一行的开头？

Answer 1

您需要在父 div 上设置换行并使最后一个元素的宽度为 100%

 #test {
      display:flex;
      flex-direction:row;
      flex-wrap: wrap
    }
    
    p { 
     margin-left:3px;
    }
    p:last-child{
      width: 100%;
    }