How to fix flex box with justify-content space between

Question

.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;
}

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

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.

I would not use this principle of constructing squares on the page, use the table. — Mikhail Zhuikov, Dec 03 '19 at 09:21
You just need to remove `justify-content:space-between;` Your problem will get solve. :) — Nirav Joshi, Dec 03 '19 at 09:21
No, I need the justify-content, so I can use the full space of the container. — mana, Dec 03 '19 at 09:29

Robin · Answer 1 · 2019-12-03T09:27:33.807

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;
}

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

add explanation and how it works, thanks – Shakiba Moshiri Dec 03 '19 at 09:24 — Shakiba Moshiri, Dec 03 '19 at 09:24

Fabrizio Calderan · Accepted Answer · 2019-12-03T09:26:18.037

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;
}

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

add explanation and how it works, thanks – Shakiba Moshiri Dec 03 '19 at 09:26 — Shakiba Moshiri, Dec 03 '19 at 09:26

How to fix flex box with justify-content space between

2 Answers2

Linked