允许内联块元素流畅地拉伸,并随着视口的收缩而折叠和堆叠 [英] 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屋!