Customize minimum items in a row with Flexbox

Question

Using CSS flex, is it possible to force an equal number of elements in a string?

I can get the elements to wrap, but not have the same number in the string ( Fiddle ).

.container {
    display: flex;
    flex-flow: row wrap;
    position: relative;
}

.container > div {
    padding: 49px;
    flex: 1;
    box-sizing: border-box;
}

Here is a diagram of what I'm trying to accomplish:

Answer 1

Perhaps you are looking for the number of queries in which you change the style depending on the number of elements in the list

list of individual articles

.container {
  display: flex;
  flex-flow: row wrap;
  border: solid 1px green;
}
.container > div {
  flex: 1 0;
  background-color: lightgreen;
  height: 30px;
  margin: 5px;
}


.item:first-child:nth-last-child(3),
.item:first-child:nth-last-child(3) ~ .item {
  flex-basis: 30%;  
}

.item:first-child:nth-last-child(4),
.item:first-child:nth-last-child(4) ~ .item {
  flex-basis: 40%;  
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Run codeHide result

Answer 2

flex-wrap , flex:

.container {
  display: flex;
  flex-flow: row nowrap; /* disable browser-controlled wrapping */
}
.container > div {
  padding: 49px 0;
  text-align: center;
  flex: 1;
  box-sizing: border-box;
}
input[type=button] {
  background: red;
}
@media ( max-width: 700px) {
  .container { flex-wrap: wrap; }
  .container > div { flex-basis: 33.33%; }
}
@media ( max-width: 400px) {
   .container > div { flex-basis: 50%; }
}

<div class="container">
  <div><input type="button" value="Button 1"></div>
  <div><input type="button" value="Button 2"></div>
  <div><input type="button" value="Button 3"></div>
  <div><input type="button" value="Button 4"></div>
  <div><input type="button" value="Button 5"></div>
  <div><input type="button" value="Button 6"></div>
</div>

Hide result

( 700px), flex-wrap: wrap , 33% , .

flex-basis 50%, .