Html 针对最后一行或特定行上的弹性项

我的问题是，我希望flexbox具有可变范围宽度，并且所有功能都很好，但不是最后一行。我希望所有子对象都具有相同的维度，即使行中没有子对象（最后一行）

#产品列表{
位置：相对位置；
显示器：flex；
柔性流：行换行；
宽度：100%；
}
#产品清单{
最小宽度：150px；
最大宽度：250px；
保证金：10px 10px 20px 10px；
弹性：1；
}

我创造

---

我的flex div可以缩小到150px，也可以增大到250px，但所有的大小都必须相同（显然我想要一个CSS解决方案，JS我知道该怎么做）。

不幸的是，在flexbox的当前迭代（级别1）中，没有干净的方法来解决最后一行对齐问题。这是一个常见的问题

将flex属性设置为以下内容将非常有用：

• 最后一行

• 最后一列

• 独生子女成排

• 单独列中

对于Flexbox 2级，此问题似乎是一个高优先级问题：

虽然这种行为在flexbox中很难实现，但在CSS网格布局中很简单：

如果网格不是一个选项，下面是一个包含各种flexbox黑客的类似问题列表：

---

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

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

---

我使用了这个变通方法，即使它不是很优雅，也没有使用Flexbox的强大功能

可在以下条件下进行：

• 所有项目都具有相同的宽度
• 这些项目有固定的宽度
• 您可以使用SCSS/SASS（尽管可以避免）

如果是这种情况，可以使用以下代码段：

$itemWidth:400px；
$itemMargin:10px；
html，正文{
保证金：0；
填充：0；
}
.柔性容器{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
保证金：0自动；
边框：纯色1px蓝色；
}
@从1美元到10美元{
@仅介质屏幕和（最小宽度：$i*$itemWidth+2*$i*$itemMargin）{
.柔性容器{
宽度：$i*$itemWidth+2*$i*$itemMargin；
}
}
}
.项目{
flex:0$itemWidth；
高度：100px；
保证金：$项目保证金；
背景：红色；
}

我在codepen上创建了一个示例，它也实现了边距

第二个和第三个条件可以分别使用css变量（如果您决定提供支持）和编译上述scss代码段来避免

---

没错，我们也可以在flexbox之前这样做，但对于响应性设计来说，

display:flex

仍然是必不可少的

一个简单的技巧会添加一个灵活的空间来填充最后一行的其余部分：

#products-list::after {
    content: "";
    flex: auto;
}

但是你不应该在商品上使用保证金。而不是用填充物将它们包装在容器中

---

您可以尝试在此处使用grid而不是flexbox：

#products-list {

  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 250px)); //grid automagic
  justify-content: start; //start left

}

---

有一个很好的解决方案，它总是有效的。 使用类别product添加一个div（与flex下的其他项目的类别相同），并为此div添加一个样式：高度：0px； 你需要增加尽可能多的跳水动作，使之成为一排

<div class="product" style="height:0px">

一行中可以有多少个。

---

这就是全部。始终有效。

我面临着同样的问题，我希望在一个可调整大小的容器中有数量可变的项目。 我想使用所有的水平空间，但所有的弹性项目都是相同大小的

我最终提出了一种javascript方法，在调整容器大小时动态添加填充间隔符

    function padLastFormRow() {
        let topList = [];
        let nSpacersToAdd = 0;
        $('#flexContainer').find('.formSpacer').remove();
        $('#flexContainer').find('.formItem').each(function(i, formItem) {
            topList.push($(formItem).position().top);
        });

        let allRowLengths = getFlexLineLengths(topList);
        let firstRowLength  = allRowLengths[0];
        let lastRowLength   = allRowLengths[((allRowLengths.length) - 1)];

        if (lastRowLength < firstRowLength) {
            nSpacersToAdd = firstRowLength - lastRowLength ;
        }

        for (var i = 1; i <= nSpacersToAdd; i ++) {
            $('#flexContainer').append(formSpacerItem);
        }
    }

函数padLastFormRow（）{
让topList=[]；
设nSpacersToAdd=0；
$（'#flexContainer'）。查找（'.formSpacer'）。删除（）；
$（'#flexContainer'）。查找（'.formItem'）。每个（函数（i，formItem）{
topList.push（$（formItem.position（）.top）；
});
设AllRowLength=GetFlexLineLength（topList）；
设firstRowLength=AllRowLength[0]；
设lastRowLength=AllRowLength[（allRowLength.length）-1]；
if（lastRowLength太长了，读不下去了，（VaR i＝1），我这个答案和书的问题是一样的：太多的信息=没有人读它。@AndreiGheorghiu，我知道这个问题没有快速解决方法。事实上，这个问题本身在性质上是不同的。如果你有一个通用的解决方案，你应该发布一个答案。另外，对于那些纯粹出于教育目的阅读这个答案的人，我认为你是正确的。很少有人会浏览整个链接列表。但是对于访问这个页面迫切需要一个解决方案，我认为他们会浏览每一个链接，希望找到一个有效的方法。基于对这个答案的投票，和（见底部的“旁注”），我想说的是，至少有些人觉得参考资料很有用。@Michael_B，我没有耐心浏览所有链接，检查是否有人提出了js修复方案，所以我针对没有确定网格（或已知子宽度）的特殊情况。只有可变宽度的子行，最后一行应该左对齐，而前几行应该拉伸以填充完整大小。这不应该是
flex grow:0
？OP希望“即使行中没有子行，所有子行的维度都相同”.
flex-grow:100
可能会使元素填充其父元素的宽度。即使flex-grow:0，这仍然会导致第二个到最后一个项目的宽度增加到该宽度。