How to distribute items evenly across rows in flexbox?

Question

If I have something like the following:

<div id="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Assuming flex-direction: rowthat the three elements <div></div>are set on the same line, is it possible for the browser to display 2 on each line, instead of displaying 3 on one line and then 1 on the next

Answer 1

Assuming flex-direction: rowthat the three elements <div></div>are installed on the same line, is it possible for the browser to display 2 on each line, instead of displaying 3 on one line and then 1 on the next

, divs 1/3 .

, ....

#flex {
  display: flex;
  flex-wrap: wrap;
  background: orange;
}
#flex div {
  border: 1px solid white;
  height: 100px;
  width: 33%;
  background: rebeccapurple;
}

<div id="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Hide result

, , / .

@Oriol , , .

:

#flex {
  display: flex;
  flex-wrap: wrap;
  background: orange;
  justify-content: space-around;
}
#flex div {
  border: 1px solid white;
  height: 100px;
  width: 33%;
  background: rebeccapurple;
}
#flex::before {
  content: "";
  width: 100%;
  order: 1;
}
div:nth-child(n + 3) {
  order: 2;
}

<div id="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  </div

Hide result

Answer 2

flex-wrap:wrap flex-basis:50%

#flex {
  display: flex;
  flex-wrap: wrap;
  width: 500px /* choose your width here*/
    
}
#flex div {
  flex: 0 50%;
  border: 1px solid red;
  height: 100px;
  box-sizing: border-box
}

<div id="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Hide result

Answer 3

, margin-right margin-left .

, .

.container {
  width: 500px;
  height: 100px;
  border: solid 1px green;
  display: flex;
  flex-wrap: wrap;
  transition: width 3s;
}

.child {
  width: 150px;
  border: solid 1px red;
}

.child:nth-child(3) {
  margin-right: 150px;
}

.child:nth-child(4) {
  margin-left: -150px;
}

.container:hover {
    width: 700px;  
}

<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>

Hide result