responsive-design - 允许内联 block 元素在视口(viewport)缩小时流畅地拉伸(stretch)、折叠和堆叠

Question

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

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

示例

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

尝试

我试过让子元素 float ，使它们成为内联 block ，我也尝试过使用 flex-box，但没有一个能给我我想要的结果。内联 block 最接近，允许它们随着父级宽度的缩小而堆叠，但我无法实现拉伸(stretch)。

限制

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

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' />");
});