Html CSS使用包装将项目对齐到末尾

我有一个固定宽度的容器，我想动态显示大小相同的物品，这些物品应该与容器的右侧对齐

当项目太多时，应将其包装成多行。但是，我希望底线完全填满，最上面的一行用剩余的空间填充

我以为我可以用flex布局实现这一点（比如

justify content:flex end；

），但我没有成功

如何（如果可能的话）使用CSS规则生成所需的位置

可以认为HTML非常基本：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <!-- ... -->
  <div class="item">N</div>
</div>

1.
2.
3.
N

---

注意：所有项目都有相同的尺寸，我只是没有在图像中准确地绘制它们。

这里的关键是使用

flex-wrap:wrap-reverse

以下是codepen的现场演示：

---

我还将链接到css中flex box的完整指南。

这里的关键是使用

flex-wrap:wrap-reverse

以下是codepen的现场演示：

---

我还将链接到css中flex box的完整指南。

您可以使用SASS生成代码，以切换所有元素的顺序：

$n:100;
@for $i from 1 through $n {
 .container > div:nth-last-child(#{$i}) {order:#{$i}}
}

例如：

.container{
显示器：flex；
柔性包装：反向包装；
弯曲方向：行反向；
}
/*用sass生成*/
.container>div:n最后一个子项（1）{
顺序：1；
}
.container>div:n最后一个子项（2）{
顺序：2；
}
.container>div:n最后一个子项（3）{
顺序：3；
}
.container>div:n最后一个子项（4）{
顺序：4；
}
.container>div:n最后一个子项（5）{
顺序：5；
}
.container>div:n最后一个子项（6）{
顺序：6；
}
.container>div:n最后一个子项（7）{
订单：7份；
}
.container>div:n最后一个子项（8）{
订单：8份；
}
.container>div:n最后一个子项（9）{
顺序：9；
}
.container>div:n最后一个子项（10）{
订单：10份；
}
.container>div:n最后一个子项（11）{
订单：11份；
}
.container>div:n最后一个子项（12）{
订单：12份；
}
.container>div:n最后一个子项（13）{
订单：13份；
}
.container>div:n最后一个子项（14）{
订单：14份；
}
.container>div:n最后一个子项（15）{
订单：15份；
}
.container>div:n最后一个子项（16）{
订单：16份；
}
.container>div:n最后一个子项（17）{
订单：17份；
}
/**/
/*无关风格*/
.container>div{
宽度：80px；
高度：60px；
保证金：5px；
颜色：#fff；
背景：红色；
}
.集装箱{
计数器复位：num；
}
.container>div:：before{
内容：计数器（num）；
计数器增量：num；
}

---

您可以使用SASS生成将切换所有元素顺序的代码：

$n:100;
@for $i from 1 through $n {
 .container > div:nth-last-child(#{$i}) {order:#{$i}}
}

例如：

.container{
显示器：flex；
柔性包装：反向包装；
弯曲方向：行反向；
}
/*用sass生成*/
.container>div:n最后一个子项（1）{
顺序：1；
}
.container>div:n最后一个子项（2）{
顺序：2；
}
.container>div:n最后一个子项（3）{
顺序：3；
}
.container>div:n最后一个子项（4）{
顺序：4；
}
.container>div:n最后一个子项（5）{
顺序：5；
}
.container>div:n最后一个子项（6）{
顺序：6；
}
.container>div:n最后一个子项（7）{
订单：7份；
}
.container>div:n最后一个子项（8）{
订单：8份；
}
.container>div:n最后一个子项（9）{
顺序：9；
}
.container>div:n最后一个子项（10）{
订单：10份；
}
.container>div:n最后一个子项（11）{
订单：11份；
}
.container>div:n最后一个子项（12）{
订单：12份；
}
.container>div:n最后一个子项（13）{
订单：13份；
}
.container>div:n最后一个子项（14）{
订单：14份；
}
.container>div:n最后一个子项（15）{
订单：15份；
}
.container>div:n最后一个子项（16）{
订单：16份；
}
.container>div:n最后一个子项（17）{
订单：17份；
}
/**/
/*无关风格*/
.container>div{
宽度：80px；
高度：60px；
保证金：5px；
颜色：#fff；
背景：红色；
}
.集装箱{
计数器复位：num；
}
.container>div:：before{
内容：计数器（num）；
计数器增量：num；
}

可以肯定的是，目前的CSS不可能做到这一点。也许是一个伪元素，但我很怀疑。你是说像这样吗？您应该颠倒项目的顺序，使第n个元素位于第一位，然后您就可以使用flex执行您试图执行的操作。@Linek您的意思是可以使用完全颠倒的数字生成我请求的定位吗？因为到目前为止，我只得到一个混合的反转行和从左到右的行内项目，或者按行顺序反转，但不反转行。@grek40是的，如果你反转顺序，你可以用flex reverse属性的组合产生你想要的东西。我可能会给你一个答案，如果你自己不能弄清楚的话，我会告诉你。很确定这在CSS中是不可能的。也许是一个伪元素，但我很怀疑。你是说像这样吗？您应该颠倒项目的顺序，使第n个元素位于第一位，然后您就可以使用flex执行您试图执行的操作。@Linek您的意思是可以使用完全颠倒的数字生成我请求的定位吗？因为到目前为止，我只得到一个混合的反转行和从左到右的行内项目，或者按行顺序反转，但不反转行。@grek40是的，如果你反转顺序，你可以用flex reverse属性的组合产生你想要的东西。我可能会给你一个答案，如果你自己不能弄明白的话，我会告诉你的。看起来是一个起点，但是，如果你给演示项目单独编号，你会看到元素从底线开始，以反向换行。这是错误的，因为顺序改变为OP不想要的。注意，我没有在这里否决投票，我实际上正在考虑将这种方法与手动分配的顺序结合使用。当然，这只是一个解决办法，如果没有一个真正的解决方案只有css。您不能使用一个手动分配的订单与动态数量的项目。你需要JS。我用同一个标签的错误。我太快了。我将尝试找到一种方法，以正确的顺序包装元素。看起来是一个起点，但如果