Html 使用和页边距之间的空格左对齐flexbox的最后一行

我在一个容器中有未知数量的元素需要包装，外部没有边距，但它们之间的边距最小

我还需要在和左对齐的最后一行之间用

空格对齐

我正试图用flexbox这样做：


。外部{
边框：1px纯黑；
}
.集装箱{
保证金：-5px；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.货柜：之后{
内容：''；
flex：自动；
}
.盒子{
背景：红色；
宽度：50px；
高度：50px；
保证金：5px；
}
最后一行对齐是flexbox的常见问题

一种考虑的方法是在最后一个可见项之后使用不可见的Flex项。简而言之，我把它们叫做“跟踪幻影项目”

。外部{
边框：1px纯黑；
}
.集装箱{
保证金：-5px；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.货柜：之后{
内容：''；
flex：自动；
}
.盒子{
背景：红色；
宽度：50px；
高度：50px；
保证金：5px；
}
.隐藏{
可见性：隐藏；
利润率：0.5px；
身高：0；
}
Michael是对的，问题是您不能在

之间设置

空格，然后选择最后一行作为
灵活启动
。但是，突出的部分是指定的宽度。这重要吗

如果没有，通常的方法是使用媒体查询来控制每行显示多少项。您可以设置许多媒体查询步骤，以确保项目不会拉伸太多，但这样一来，两个项目之间的空间将与您的正常网格水槽紧密对齐，从而消除“最后一行问题”。你觉得这样行吗

示例：
堆栈溢出不允许我对Michael_B的答案发表评论，但我确实想说明如何使用JavaScript为试图解决此问题的任何人计算要附加的幻影元素的数量

  /**
   * @param {Integer} numElements The number of elements you're displaying.
   * @param {Number} element Width Width, in pixels, of each element.
   * @param {Number} margin Width, in pixels. Your minimum target margin between items. 2x the margin on each individual item.
   * @param {Number} containerWidth Width, in pixels, of the containing element.
   */
  const getNumPhantomElements = ({numElements, elementWidth, margin, containerWidth}) => {
    const elementsPerRow = Math.floor(containerWidth / (elementWidth + margin));
    const elementsInLastRow = numElements % elementsPerRow;
    const numPhantomElements = elementsPerRow - elementsInLastRow;

    return numPhantomElements;
  };

在这种情况下：

const containerWidth = document.querySelector('.container').offsetWidth;
const numPhantomElements = getNumPhantomElements({
  numElements: 21,
  elementWidth: 50,
  margin: 10, // 2x 5px margin on each box
  containerWidth
}); // Append this many elements (output depends on your viewport size)

这只有在我们知道一行中有多少个时才有效（我注意到我发布了错误的链接，它不应该在小提琴中有500px的宽度，我现在已经更新了）。是的，我看到您更新了代码以删除容器上的宽度。如果没有这个限制，您可能需要求助于JS，因为我不相信当前的CSS技术能够解决这个问题。我将保留我的答案作为一般参考。我已经编辑了这个片段来展示它。希望你不介意：-）这对我来说很有魅力-谢谢！：）这是可怕的肮脏，但它的工作，我找不到更好的方式。所以+1:）等几年。Flexbox级别2可能会添加一些功能来解决此问题。flex容器中的最后一行对齐可能是Flexbox中目前缺少的#1功能。另一个常见问题是
列换行
的各种缺陷。希望在flexbox规范的下一个版本中能够解决这两个问题。在没有flexbox的情况下，有没有一种我们可能忽略的方法可以做到这一点？宽度不应该在那里，也不在问题的代码中。让这变得困难的是，它必须是响应的，我们不知道容器的宽度，因此不知道每行有多少个元素。