How To Fix Flex Box With Justify-content Space Between

My question is, how can I move the Box 5 next to Box 4 without the space between them? At the moment, the Box 5 is move to right end, and Box 4 is stay on the left.

Solution 1:

In this specific layout the problem arises for the 3n + 2 child .item if it is also the last-child child: for that element adjust the right margin

.container {
  width: 400px;
  border: 2px solid red;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.item {
  padding: 20px;
  border: 1px solid blue;
  margin: 10px;
  width: 70px;
}

.container:last-child:nth-child(3n + 2) {
   margin-right: auto;
}

<divclass="container"><divclass=item>Box 1</div><divclass=item>Box 2</div><divclass=item>Box 3</div><divclass=item>Box 4</div><divclass=item>Box 5</div></div>

Solution 2:

There are lots of way you can achieve this. Just remove justify-content property from your style. It will be fine.

And you can also wrap box 4 and box 5, and give the root container(in this case: item-special-container) display: flex.

.container {
width:400px;
border:2px solid red;
display:flex;
flex-flow:row wrap;
justify-content:space-between;
}

.item {
padding:20px;
border:1px solid blue;
margin:10px;
width:70px;
}
.item-special-container {
  display: flex;
}

<divclass="container"><divclass=item>Box 1</div><divclass=item>Box 2</div><divclass=item>Box 3</div><divclass="item-special-container"><divclass=item>Box 4</div><divclass=item>Box 5</div><div></div>