flex-wrap elements in pairs

Question

I have a flexbox with 4 inner divs containing images and text. the flexbox is allowed to wrap with: flex-wrap: wrap

in a normal laptop screen the items are in one row like:

item item item item,

when the window is scaled down, the last flex element goes down in a new row like:

item item item
item

this way I have 3 items in the first row, and 1 in the second.

What I need is that the row to break only in pairs. to not have 3 in a row, and 1 in a new row, just all 4 in a row, or 2 / 2 in a row.

I also need that the items to shrink a bit, but I found a workaround for it.

<div class = "flex">

    <div class = "f4">
        <a href = "...">
            <img ... width = "330" height = "247" >
            <h3>Title</h3>
        </a>
        <p>the excertp ... </p>
    </div>

    <div class = "f4">
        <a href = "...">
            <img ... width = "330" height = "247" >
            <h3>Title</h3>
        </a>
        <p>the excertp ... </p>
    </div>

    <div class = "f4">
        <a href = "...">
            <img ... width = "330" height = "247" >
            <h3>Title</h3>
        </a>
        <p>the excertp ... </p>
    </div>

    <div class = "f4">
        <a href = "...">
            <img ... width = "330" height = "247" >
            <h3>Title</h3>
        </a>
        <p>the excertp ... </p>
    </div>

</div>

.flex {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.f4 {
    flex-basis: 300px;
    flex-grow: 1;
    margin: 8px;
}
.f4 img {
    max-width: 330px;
    width: 100%;
    height: auto;
}

EDIT:

I let the items to shrink until the original size does not fit 3 times, this way I do not have to add extra wrapper.

.f4 {
    flex-basis: 243.5px;
    flex-grow: 1;
    max-width: 330px;
    margin: 8px;
}
.f4 img {
    width: 100%;
    height: auto;
}
@media (max-width: 1038px) {
    .f4 {
        flex-basis: 330px;
    }
}

Answer 1

No way to auto solve this for all cases (Besides extra wrappers for [1-2] and [3-4]).

"Extra wrapper" not useful for generates lists (When the length of the list is dynamic - blog page list for example).

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

The most basic way to solve this is by media Q:

Your layout is: [25%] [25%] [25%] [25%] And on smaller screens: 50% 50% - This is why media queries are so useful.

*{
  box-sizing: border-box;
}
.flex{
  display: flex;
  flex-wrap: wrap;
}
.col{
  border: 1px solid lightgray;
  flex-basis: 50%;
  height: 200px;
  /* align card  */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e1f7ff;
}

@media only screen and (min-width: 992px) {
  .col{
    flex-basis: 25%;
  }
}

<main class="flex">
  <div class="col">col 1</div>
  <div class="col">col 2</div>
  <div class="col">col 3</div>
  <div class="col">col 4</div>
</main>

Answer 2

One easy trick you can do is to make a wrapper along with those 2 flex:

Play around with fiddle for more clarity.

.flex {
  display: flex;
  flex-wrap: wrap;
}

.Row {
  width: 700px;
  display: flex;
  justify-content: space-evenly;
}

.f4 {
  flex-basis: 300px;
  flex-grow: 1;
  margin: 8px;
}

.f4 img {
  max-width: 330px;
  width: 100%;
  height: auto;
}

<div class="flex">
  <div class="Row">
    <div class="f4">
      <a href="...">
        <img ... width="330" height="247">
        <h3>Title</h3>
      </a>
      <p>the excertp ... </p>
    </div>

    <div class="f4">
      <a href="...">
        <img ... width="330" height="247">
        <h3>Title</h3>
      </a>
      <p>the excertp ... </p>
    </div>
  </div>
  <div class="Row">
    <div class="f4">
      <a href="...">
        <img ... width="330" height="247">
        <h3>Title</h3>
      </a>
      <p>the excertp ... </p>
    </div>

    <div class="f4">
      <a href="...">
        <img ... width="330" height="247">
        <h3>Title</h3>
      </a>
      <p>the excertp ... </p>
    </div>
  </div>




</div>