Html 包装后，将flex项目保留在适当的列中

我试图使用justify content来正确地对齐容器中的div，但是这个选项并没有按照我预期的方式工作。我希望容器中的div保持示例第二行的顺序，如下所示：

1   2   3
4   5

而不是像：

1  2  3
4     5

.集装箱{ 显示器：flex； 宽度：1100px； 证明内容：之间的空间； 柔性包装：包装； } .container>div{ 宽度：330px； 高度：125px； 背景色：rgba18,28,41,0.50； 边框：1px实心325E82； }

---

一种解决方案是使用伪选择器：：after来创建一个伪“不可见”元素，该元素与其他元素占据相同的宽度。与“对齐内容”结合使用时，会将现有的最终元素移动到中心：

.集装箱{ 显示器：flex； 宽度：1100px； 证明内容：之间的空间； 柔性包装：包装； } .container>div{ 宽度：330px； 高度：125px； 背景色：rgba18,28,41,0.50； 边框：1px实心325E82； } .容器：：之后{ 内容：； 宽度：332px；/*.container>div'width'加上.container>div'border'*/ }

---

一种解决方案是使用伪选择器：：after来创建一个伪“不可见”元素，该元素与其他元素占据相同的宽度。与“对齐内容”结合使用时，会将现有的最终元素移动到中心：

.集装箱{ 显示器：flex； 宽度：1100px； 证明内容：之间的空间； 柔性包装：包装； } .container>div{ 宽度：330px； 高度：125px； 背景色：rgba18,28,41,0.50； 边框：1px实心325E82； } .容器：：之后{ 内容：； 宽度：332px；/*.container>div'width'加上.container>div'border'*/ }

---

另一种解决方法是让内容合理化：flex start；根据所需的列数和限制子项的大小，在.Container上指定正确子项的边距

对于3柱格线，如下所示：

.集装箱{ 显示器：flex； 柔性流：行换行； 调整内容：灵活启动； } .项目{ 背景颜色：灰色； 宽度：100px； 高度：100px； 弹性：032%； 利润率：1%0； } .项目：nth-child3n-1{ 左缘：2%； 保证金权利：2%； }

---

另一种解决方法是让内容合理化：flex start；根据所需的列数和限制子项的大小，在.Container上指定正确子项的边距

对于3柱格线，如下所示：

.集装箱{ 显示器：flex； 柔性流：行换行； 调整内容：灵活启动； } .项目{ 背景颜色：灰色； 宽度：100px； 高度：100px； 弹性：032%； 利润率：1%0； } .项目：nth-child3n-1{ 左缘：2%； 保证金权利：2%； }

---

Flexbox的设计目的不是创建完美的网格。这就是为什么在最后一行对齐flex项没有自然解决方案的原因。你需要黑客来让它工作

这些帖子对此进行了详细解释：

解决这个问题的理想方法是从flex布局切换到grid布局。使用CSS网格布局，可以更好地控制内容项的放置和大小

.集装箱{ 显示：网格； 网格自动行：125px； 网格模板列：重复自动填充，330px； 栅隙：10px； 宽度：1100px； } .container>div{ 背景色：rgba18,28,41,0.50； 边框：1px实心325E82； }

---

Flexbox的设计目的不是创建完美的网格。这就是为什么在最后一行对齐flex项没有自然解决方案的原因。你需要黑客来让它工作

这些帖子对此进行了详细解释：

解决这个问题的理想方法是从flex布局切换到grid布局。使用CSS网格布局，可以更好地控制内容项的放置和大小

.集装箱{ 显示：网格； 网格自动行：125px； 网格模板列：重复自动填充，330px； 栅隙：10px； 宽度：1100px； } .container>div{ 背景色：rgba18,28,41,0.50； 边框：1px实心325E82； }

---

您应该使用css网格来实现这一点。Flex用于以一维方式显示项目，您希望以二维方式将项目对齐。@Frilox谢谢您的建议！刚刚查看了什么是css网格，对于这类任务来说似乎很棒。要重新编写我的代码来使用网格：你应该使用css网格。Flex用于以一维方式显示项目，您希望以二维方式将项目对齐。@Frilox谢谢您的建议！刚刚查看了什么是css网格，对于这类任务来说似乎很棒。我将重新编写代码以使用grids:DBut，如果我有6个元素+after-它将生成新行…考虑到：：after的高度为零且没有内容，这不是问题。演示添加第六个元素不会有明显的差异。

---

我已经将背景设置为红色来帮助说明这一点：@obsidiange您最好使用330px作为伪元素的宽度，并应用*，*：before，*：after{box size:border box；}来摆脱这种讨厌的计算。但是，如果我有6个元素+after-它将生成新行…这不是问题，考虑到：：after的高度为零且没有内容。演示添加第六个元素不会有明显的差异。我已经将背景设置为红色来帮助说明这一点：@obsidiange您最好使用330px作为伪元素的宽度，并应用*，*：before，*：after{box size:border box；}来摆脱这种讨厌的计算。在flex项上使用百分比边距或填充不是一个好主意。目前，它们在主要浏览器中的呈现方式不同。例如，您的解决方案在Chrome中工作，但在Firefox中失败。在弹性物品上使用百分比边距或填充物不是一个好主意。目前，它们在主要浏览器中的呈现方式不同。例如，您的解决方案在Chrome中工作，但在Firefox中失败。