CSS flex design with flexible packaging

Question

I have a flex <div>containing several elements (I do not know the exact number in advance).

<div class="container">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
</div>

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

Let's say I expect 3 to 15 children, and they have a minimum width, but can increase to 2x to fill the remaining space (here is the fiddle: https://jsfiddle.net/r3xch5n9/ ).

With flex-wrap: wrap;I can make them flow in new lines when necessary. Usually the result is nice to see, for example, in this case with 3 and 3 elements

But with different total widths, the result is odd

Is there a way to make the browser split the div?
EG: In the above case, I expect 3 elements in a row, with a white field between them of 5 elements in the first row and only 1 in the second.

Answer 1

flex-basis: 33.33% inner, min-width max-width inner, , - :

div.container {
  border: 2px solid grey;
  display: flex;
  flex-wrap: wrap;
}
div.inner {
  flex-basis: 33.33%;
  height: 120px;
  padding: auto;
  margin: auto;
}

<div class="container">
  <div class="inner" style="background-color: red">
    <span>1</span>
  </div>
  <div class="inner" style="background-color: blue">
    <span>2</span>
  </div>
  <div class="inner" style="background-color: green">
    <span>3</span>
  </div>
  <div class="inner" style="background-color: yellow">
    <span>4</span>
  </div>
  <div class="inner" style="background-color: grey">
    <span>5</span>
  </div>
  <div class="inner" style="background-color: orange">
    <span>6</span>
  </div>
</div>

, calc, :

div.container {
  border: 2px solid grey;
  display: flex;
  flex-wrap: wrap;
}
div.inner {
  flex-basis: calc(33.33% - 10px);
  height: 120px;
  margin: 5px;
}

<div class="container">
  <div class="inner" style="background-color: red">
    <span>1</span>
  </div>
  <div class="inner" style="background-color: blue">
    <span>2</span>
  </div>
  <div class="inner" style="background-color: green">
    <span>3</span>
  </div>
  <div class="inner" style="background-color: yellow">
    <span>4</span>
  </div>
  <div class="inner" style="background-color: grey">
    <span>5</span>
  </div>
  <div class="inner" style="background-color: orange">
    <span>6</span>
  </div>
</div>

jquery flex - . :

var flexChildrenNo = $('.container > .inner').length;

function modifyFlexItems() {
  var $width = $(window).width();
  // max number of elements in a row
  var num = Math.floor($width/120); 
  // find the number of flex chidren in a row
  while(flexChildrenNo % num)
    num--; 
  // calculate margin:
  // here 120 is  min-width
  // here 4 is adjustment for the 2px border
  var margin = ($width - num * 120 - 4) / (2 * num);
  $('.inner').css({'margin': margin + 'px'});
}
modifyFlexItems();
$(window).resize(modifyFlexItems);

body{
  margin:0;
}
*{
  box-sizing:border-box;
}
div.container {
  border: 2px solid grey;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
div.inner {
  max-width: 250px;
  min-width: 120px;
  height: 120px;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="inner" style="background-color: red">
    <span>1</span>
  </div>
  <div class="inner" style="background-color: blue">
    <span>2</span>
  </div>
  <div class="inner" style="background-color: green">
    <span>3</span>
  </div>
  <div class="inner" style="background-color: yellow">
    <span>4</span>
  </div>
  <div class="inner" style="background-color: grey">
    <span>5</span>
  </div>
  <div class="inner" style="background-color: orange">
    <span>6</span>
  </div>
</div>