允许内联块元素流畅地拉伸，并随着视口的收缩而折叠和堆叠 [英] Allow inline block elements to stretch fluidly and collapse and stack as viewports shrink

问题描述

给出以下代码，我想找到一种方法，使一系列内联块元素在展开时彼此重叠，同时扩展父元素的整个宽度.

Given the following code, I would like to find a way to have a series of inline-block elements stretch the full width of the parent element while stacking on top of each other as the line wraps.

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

If all children have the same min-width, I want this to create a grid effect. For example, on larger screens, the children may stack 5 across until they wrap onto a second line. I would like those all to be 20% (1/5) of the available width. As the screen shrinks, the fifth and 10th items wrap leaving two rows of 4 items and a third row of 2 items. Now I would like to have the children all stretch 25% (1/4) of the available width except for the last row of two children. Those should be 50% each.

尝试

我已经尝试过让孩子们漂浮起来，使他们成为内联块，并且我尝试了flex-box，但是他们都没有给我我想要的结果.内联块最接近，可以随着父级宽度的缩小而堆叠，但我无法实现拉伸.

I've tried floating the children, making them inline-blocks and I've experimented with flex-box, but none of them are giving me the result I desire. Inline-blocks have come the closest, allowing them to stack as with parent width shrinks, but I can't achieve the stretching.

限制

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

I'd prefer not to use media queries as I would then need to write in the exact breakpoints for this example then alter all of them if anything changes in the site layout. I'd like to find a more organic way to solve this problem.

JavaScript退出了.我想找到一种仅使用CSS即可做到这一点的方法.

Javascript is out. I want to find a way to do this with just CSS.

推荐答案

非常感谢Chris Coyier和CSS Tricks.Flexbox确实是答案.这里不是复制并粘贴他的解决方案，而是指向他的笔的链接: http://codepen.io/chriscoyier/pen/yCeax .如果您对他的全部想法感兴趣，请访问以下博客文章: http://css-tricks.com/filling-space-last-row-flexbox/

Many thanks to Chris Coyier and CSS Tricks. Flexbox is indeed the answer. Rather than copy and paste his solution, here's the link to his Pen: http://codepen.io/chriscoyier/pen/yCeax. If you are interested in his whole thought about it, here is the blog post to it: http://css-tricks.com/filling-space-last-row-flexbox/

这是实际的解决方案，以防万一CodePen消失.

Here's the actual solution, just in case the CodePen goes away.

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

这篇关于允许内联块元素流畅地拉伸，并随着视口的收缩而折叠和堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！