jquery - 带有 flex-wrap 的 CSS flex 设计

Question

我有一个 flex <div>包含一些元素(我事先不知道确切的数字)。

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

假设我预计有 3 到 15 个 child ，他们确实有最小宽度，但可以扩展到 2 倍以填充剩余空间(这里是一个 fiddle :https://jsfiddle.net/r3xch5n9/)。

与 flex-wrap: wrap;我可以在需要时让它们在新行中流动。通常结果很好看，例如在这种情况下有 3 个和 3 个元素

但总宽度不同，结果很奇怪

有没有办法让浏览器平分div？
例如:在上面的例子中，我希望每行有 3 个元素，它们之间有一个白边，第一行有 5 个元素，第二行只有 1 个元素。

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>