flexbox put last item at next line

Question

I have a container where

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

p { 

 margin-left:3px;
}

<div id = "test">

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

</div>

How can I send the last element to the start of the next line?

Answer 1

you need to set wrap on the parent div and make last element's width 100%

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

Answer 2

Use last-child and order

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

p { 

 margin-left:3px;
}

p:last-child{
   order: -1;
}

Answer 3

What you're probably looking for is the use of wrapping flexboxes.

Have a look at this answer which describes a similar problem, where you can say how much an item in a row "contributes" to a row using the flex css attribute.

#test {
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  width: fit-content;
}

p {
  margin: 0 0 0 3px;
  padding: 0px;
  flex: 0 0 calc(50% - 3px); # here the - 3px come from the margin-left being 3px
}

<div id = "test">

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

</div>

Answer 4

You can use grid instead of flexbox. Set every line with two columns and you can solve that issue.

#test {
  display: grid;
  grid-template-columns: repeat(2, 10px);
}

<div id="test">
  <p> 1 </p>
  <p> 1 </p>
  <p> 1 </p>
</div>