定位最后一行的弹性项目

Question

我的问题是我希望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我知道的方式).

Answer 1

不幸的是,在当前的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在每行上拉伸元素,同时保持一致的宽度？

Answer 2

作为一种快速而肮脏的解决方案，可以使用：

.my-flex-child:last-child/*.product:last-child*/ {
  flex-grow: 100;/*Or any number big enough*/
}