Html 如何在具有水平中心对齐和包装项目的Flex中控制垂直和水平间距？

包装项目水平放置，中心对齐。如何控制垂直和水平间距

在这个例子中，我们希望项目之间有16px的水平空间和8px的垂直空间

以下是一个可能的解决方案：

/*解决方案*/
.柔性包装{
垫面：1px；
}
.flex包装器：在{
内容：“；
显示：块；
利润上限：-9px；
}
.flex{
显示器：flex；
柔性包装：包装；
左边距：-16px；
证明内容：中心；
}
.弹性项目{
左侧填充：16px；
填充顶部：8px；
}
/*出于演示目的，与解决方案无关*/
身体{
利润率：50像素；
}
.集装箱{
宽度：600px；
外形：1px纯黑；
}
钮扣{
宽度：100px；
高度：40px；
背景：无；
边框：4倍纯红；
字体大小：16px；
}

1.
2.
3.
4.
5.
6.
7.
8.
9

欢迎来到CSS网格的奇妙世界，它非常适合这个应用。 正如您在下面看到的，代码更少，更容易理解

列与行之间的间距控制是通过列与列之间的间距的网格列间距和行与行之间的间距的网格行间距来完成的

您可以更轻松地编写此命令，对列使用repeat函数，例如：

grid-template-columns: repeat(5, 100px);

太神奇了

明确地看看你还可以用CSS网格做些什么，忘掉Flexbox。这就是未来。要开始，请检查：

.container{
显示：网格；
宽度：564px；
网格模板列：自动；
栅柱间隙：16px；
网格行间距：8px；
外形：1px纯黑；
}
钮扣{
宽度：100px；
高度：40px；
背景：无；
边框：4倍纯红；
字体大小：16px；
}

1.
2.
3.
4.
5.
6.
7.
8.

以@rx2347基于CSS网格的答案作为基线，但越来越接近您实际寻找的布局。。。如果要放置的固定项目数量合理，可以使用

repeat（）

创建更精细的网格，手动将元素的位置设置为所需的位置，然后将元素放置在粒度更细的特定列上

可能还有其他方法可以通过CSS网格在每行偏移/缩进的基础上实现这一点。为了使它真正自动化，例如处理大量项目和/或任意数量的项目，我会尝试使用jQuery脚本，可能会使用CSS网格来迭代和设置位置。可能有纯CSS和HTML方式来容纳更多任意数量的元素。这取决于你的应用

.container{
显示：网格；
宽度：800px；
网格模板列：重复（60，10px）；
栅柱间隙：16px；
网格行间距：8px；
}
#按钮1{
网格列开始：4；
}
#按钮2{
网格列开始：8；
}
#按钮3{
网格列开始：12；
}
#按钮4{
网格列开始：16；
}
#按钮5{
网格列开始：20；
}
#按钮6{
网格列开始：6；
网格行开始：2；
}
#按钮7{
网格列开始：10；
网格行开始：2；
}
#按钮8{
网格列开始：14；
网格行开始：2；
}
#按钮9{
网格列开始：18；
网格行开始：2；
}
钮扣{
宽度：100px；
高度：40px；
背景：无；
边框：4倍纯红；
字体大小：16px；
}

1.
2.
3.
4.
5.
6.
7.
8.
9

您可以使用

边距

设置间距：

.container{
宽度：600px；
边框：1px实心；
}
部分{
显示器：flex；
柔性流：行换行；
证明内容：中心；
裕度：-8px-8px 0；
}
钮扣{
宽度：100px；
高度：40px；
保证金：8px 8px 0；
边框：4倍纯红；
背景：无；
字体大小：16px；
}

1.
2.
3.
4.
5.
6.
7.
8.
9

一个简单的解决方案是使用方框大小，然后使用填充控制垂直和水平间距

.flex-item {
  box-sizing: border-box;
  padding: 4px 8px;
}

或普遍适用：

*, *:before, *:after {
  box-sizing: border-box;
}

---

在您的问题中，您没有控制元素之间的间距，因为您使用的是

填充属性，元素一个接一个，但您正在达到效果。如果你给每一个都加上背景，你会注意到我试图解释的内容

要控制flexbox布局（或其他布局）中元素之间的间距，您需要在项目上使用边距，在本例中，在
display:flex元素

由于SCSS变量，我使用了calc值，这里我将变量名更改为30px

有一个片段可以达到你想要的


.flexcontainer{
填充：0 15px；
宽度：100%；
边框：1px纯黑；
}
福莱斯罗先生{
显示器：flex；
柔性流：行换行；
/*只有水平的负边距用于填充和元素的结尾，因为您可能不知道哪个元素位于左侧或右侧的第一个，它将补偿容器的填充*/
保证金：0px计算（30px/2*-1）；
证明内容：周围的空间；
}
.flexrow.row-5-el>.element{
弹性：0.1计算（100%/5-30px）；
最大宽度：计算（100%/5-30px）；
/*在每侧设置15px的边距*/
保证金：计算（30px/2）；
/*用于测试目的*/
外形：1px自动绿；
}

乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
我忘了提到我希望能够将项目水平居中对齐。我更新了这个问题。我将把它标记为一个副本，你的问题已经在这里得到了回答。这个问题没有解释如何控制项目之间的垂直和水平间距，这是这个问题的本质。如果你想一个