允许内联块元素在视口缩小时流畅地拉伸并折叠和堆叠

Question

鉴于以下代码，我想找到一种方法让一系列内联块元素拉伸父元素的整个宽度，同时在换行时彼此堆叠。

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

示例

如果所有的孩子都有相同的最小宽度，我想创建一个网格效果。例如，在更大的屏幕上，孩子们可能会堆叠 5 个，直到他们换到第二行。我希望这些都是可用宽度的 20% (1/5)。随着屏幕缩小，第 5 和第 10 个项目会换行，留下两行 4 个项目和第三行 2 个项目。现在我想让孩子们都拉伸可用宽度的 25% (1/4)，除了最后一行两个孩子。这些应该是每个 50%。

尝试

我试过浮动孩子，让他们成为内联块，我也尝试过 flex-box，但他们都没有给我想要的结果。内联块最接近，允许它们堆叠，因为父宽度缩小，但我无法实现拉伸。

限制

我不希望使用媒体查询，因为我需要为此示例编写确切的断点，然后在站点布局发生任何变化时更改所有断点。我想找到一种更有机的方法来解决这个问题。

Javascript 已发布。我想找到一种仅使用 CSS 的方法。

Answer 1

非常感谢 Chris Coyier 和 CSS Tricks。 Flexbox 确实是答案。而不是复制和粘贴他的解决方案，这里是他的 Pen 的链接：http://codepen.io/chriscoyier/pen/yCeax。如果你对他的整个想法感兴趣，这里是它的博文：http://css-tricks.com/filling-space-last-row-flexbox/

这是实际的解决方案，以防 CodePen 消失。

HTML

<button id="add">Add Child</button>

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

* {
  box-sizing: border-box;  
}

#parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  height: 50px;
  background: red;
  flex: 1;
  min-width: 25%;
  border: 5px solid white;
}

@media (max-width: 700px) {
  .child {
    min-width: 33.33%; 
  }
}

@media (max-width: 400px) {
  .child {
    min-width: 50%; 
  }
}

jQuery

$("#add").on("click", function() {
  $("#parent").append("<div class='child' />");
});