允许内嵌块元素流畅地展开并折叠并堆叠为视口缩小

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）。当屏幕缩小时，第五和第十项包裹留下两行4个项目和第三行两个项目。现在我希望孩子们都可以伸展25％（1/4）的可用宽度，除了最后一排的两个孩子。这些应该是每个50％。

尝试

我已经试过浮动孩子们，使他们直列块，我已经使用Flex-箱试验，但他们都不给我我想要的结果。内联块已经走得最近，允许它们与父宽度缩小一样堆叠，但是我无法实现伸展。

限制

我宁愿不使用媒体查询，我会那么需要在确切的断点写在这个例子中，然后如果站点布局有什么变化改变他们。我想找一个更有机的方式来解决这个问题。

Javascript is out。我想找到一种只用CSS来做到这一点的方法。

Answer 1

非常感谢Chris Coyier和CSS技巧。 Flexbox确实是答案。而不是复制和粘贴他的解决方案，这里是他的笔的链接：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' />"); 
});