我玩过响应式的flexbox网格,没有媒体查询.
http://jsbin.com/qurumisu/1(重新缩放窗口以查看其工作原理)
它适合尽可能多的弹性项目,并且可以平均拉伸它们的宽度以填充整条线.但是,这对"孤儿"项目没有帮助.如果第一条线适合5/6项,那么第二条线只剩下一条,这使得它比它的兄弟姐妹伸展得更宽.我希望通过将元素均匀地划分为所需的行数来避免这种行为.
这可能吗？
cim*_*non 10
不,没有媒体查询调整弹性基础值.伸展和包裹的Flex项目尝试最大化适合每行的项目数量.
您可能需要考虑使用多列模块,它将尝试在创建的所有列中均等地分配元素:
.foo {
columns: 100px;
}
http://caniuse.com/#feat=multicolumn
我正在寻找完全相同的东西(在柔性包装物中排列图像缩略图).你的样本给了我一些指示,我用它玩了一下,想出了以下内容:
好吧,如果你愿意为HTML代码添加一些额外的标记,那确实是可能的.假设我可以n在全宽屏幕上显示项目,我在容器的末尾添加了n-1项目<div class="hidden-item">并修改了CSS代码,以便这些隐藏的项目具有相同的宽度但没有高度.这样,它们也会缠绕,迫使最后一个项目收缩,而不会增加容器的高度.
结果如下:http: //output.jsbin.com/qaxatujaho/1