作者：lixinglon257 | 来源：互联网 | 2023-02-12 11:06
我的问题是我希望flexbox具有可变范围宽度,并且一切正常,但不是最后一行.我希望所有孩子都有相同的维度,即使行没有孩子(最后一行).
#products-list {
position:relative;
display: flex;
flex-flow: row wrap;
width:100%;
}
#products-list .product {
min-width:150px;
max-width:250px;
margin:10px 10px 20px 10px;
flex:1;
}
在JSFiddle示例中,我创建了一个动态情境.
我的flex div可以缩小到150px并且长到250px,但所有都必须具有相同的大小(显然我想要一个CSS解决方案,JS我知道的方式).
1> Michael_B..：
不幸的是,在当前的flexbox迭代(Level 1)中,没有干净的方法来解决最后一行对齐问题.这是一个常见问题.
有一个flex属性是有用的:
last-row
last-column
only-child-in-a-row
alone-in-a-column
这个问题似乎是Flexbox Level 2的高优先级:
CSS工作组Wiki - 规范问题和规划
https://lists.w3.org/Archives/Public/www-style/2015Jan/0150.html
尽管在flexbox中很难实现这种行为,但在CSS网格布局中它简单易行:
即使在包裹后,也可以弯曲相同宽度的物品
如果Grid不是一个选项,这里是一个包含各种flexbox hacks的类似问题的列表:
正确调整最后一行的弹性项目的大小和对齐方式
弹性框:将最后一行与网格对齐
Flexbox wrap - 最后一行的不同对齐方式
当flex项被强制为新行时,它如何保持相同的尺寸？
连续选择一个元素？
对齐最后一个flexbox行中的元素
如何在保持相同尺寸的同时允许柔性物品生长？
使用间距和边距左对齐flexbox的最后一行
最后一行上的flex项目之间的余量不一致
如何保持包装的flex-items与前一行的元素宽度相同？
如何在多行flexbox中对齐左末行/行
网格的最后一个孩子得到了巨大的gutter导致flexbox空间介于两者之间
管理对齐内容:最后一行之间的空格
行为与包装之间的Flexbox空间
可以使用CSS Flexbox在每行上拉伸元素,同时保持一致的宽度？
这个答案和书籍有同样的问题:太多的信息=>没有人读它.拥有TL会很好; DR; 部分(快速修复).
@AndreiGheorghiu，我知道没有快速解决此问题的方法。实际上，问题本身具有不同的性质。如果您有通用解决方案，则应该发布答案。
但对于访问此页面的人来说,*迫切需要一个解决方案*,我认为他们会通过每一个链接,希望找到一种有效的方法.基于对这个答案的赞成,[**这一个**](http://stackoverflow.com/q/33891709/3597276)和[**这一个**](http://stackoverflow.com/ a/36118012/3597276)(见底部的"旁注"),我想说至少有些人认为参考文献有用.
京公网安备 11010802041100号