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黑客的类似问题列表：

---

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

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

• 最后一行

• 最后一列

• 独生子女成排

• 单独列中

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

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

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

---

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

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

---

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

.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

仍然是必不可少的

我使用了这个变通方法，即使它不是很优雅，也没有使用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;
}

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

---

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

#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

}

---

您可以尝试在此处使用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">

一行中可以有多少个。 这就是全部。一直工作