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

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个项目和第三行2个项目.现在我想让孩子们伸展可用宽度的25%(1/4),除了两个孩子的最后一排.那些应该是50%.

尝试

我试过漂浮孩子,让他们成为内联块,我尝试使用flex-box,但他们都没有给我我想要的结果.内联块最接近,允许它们与父宽度收缩一样堆叠,但我无法实现拉伸.

限制

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

Javascript已经出来了.我想找到一种只使用CSS的方法.

Answer 1

非常感谢Chris Coyier和CSS Tricks.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' />");
});